Knockout CSS樣式，通過一個函數以及綁定

Question

我知道你可以使用knockout來設置類，像這樣每個函數返回;

<span data-bind="css: styling()"></span> 

您也可以使用true/false值對它們進行內聯。

<span data-bind="css: {className: $parent.active() == $data}"></span> 

有沒有一種方法可以在一個綁定？我的例子是我想返回一個自定義類，這取決於span元素顯示的項目的類型（將會有很多這樣的），但是我也希望它們在被選中時被突出顯示。

看來你不能在對象的右側使用函數，並且有兩個導致第二個覆蓋第一個。

任何想法？

Answer 1

通過此示例，您將能夠指定每個項目的類別。

查看

<div data-bind="foreach: items" > 
    <span data-bind="css : $parent.styling($data), text: $data"></span> 
</div> 

JS：

var vm = { 
    items : ['a','b','c' ], 

    styling : function(item) { 
     if(item =='a') return 'active'; 
     if(item =='b') return 'active bold'; 
     return ''; 
    }  
}; 

ko.applyBindings(vm); 

See fiddle

---

編輯：

@Shadow：你是對的，如果你將一個值傳遞給一個計算它設置（或寫）它。

我認爲這將符合您的需求。 當在一個項目上調用切換功能。 然後，活動可觀察性將被改變，最後計算出造型。

JS

var Item = function(data) { 
    var self = this; 
    self.name = data; 
    self.active = ko.observable(false); 
    self.styling = ko.computed(function(item) { 
     if(self.active()) return 'active'; 
     return ''; 
    }); 
    self.toggle = function(){ 
     self.active(!self.active()); 
    } 
}; 

var vm = { 
    items : [new Item('a'),new Item('b'), new Item('c') ]   
}; 


ko.applyBindings(vm); 

查看

<div data-bind="foreach: items" > 
    <span data-bind="css : styling, text: name, click : toggle"></span> 
    <br/> 
</div> 

See fiddle