3種不同的方式將類名與knockoutjs綁定

Question

爲什麼knockoutjs中存在3種綁定css類名的方法，有什麼區別？

1. <div data-bind="class: name"> // jquery is needed 

    2. <div data-bind="attr: { class: name}"> 

    3. <li data-bind="css: name"> 

Answer 1

attr: { class: name}結合到整個類屬性。所以你必須知道應用於元素的所有類。

css: name只綁定一個或多個指定的類。所以，如果我有HTML：

<span class="myclass" data-bind="css: myOtherClass"> 

我可以結束了兩個類：myclass和myOtherClass

我不知道你的class: name語法。我找不到任何文件？

編輯：我覺得class結合可能對css結合舊的淘汰賽語法。我可以在Github上找到它的wiki page，但沒有當前的源代碼。

Answer 2

attr和css之間的主要區別是attr綁定不僅僅是一個類綁定，而是一般的屬性。它始終使用元素上的值創建新屬性。因此，例如，如果您的元素上有另一個類，則與類綁定的attr將覆蓋它。如果css綁定不存在，它將創建新的類屬性。否則，它會將其附加到現有屬性。

http://jsfiddle.net/dima_k/kN8Nx/

<div data-bind="css: myclass" class='always'> 
    Test 1 
</div> 

<div data-bind="attr:{class: myclass}" class='always'> 
    Test 2 
</div>