使用knockoutjs绑定类名的3种不同方法

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和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>

Answer 2

attr: { class: name}绑定到整个类属性。因此，您必须知道应用于该元素的所有类。

css: name仅绑定一个或多个命名类。如果我有HTML：

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

我最终可能会有两个课程：myclass和myOtherClass

我不确定您的class: name语法。我找不到任何文件吗？

编辑：我认为class绑定可能是css绑定的旧Knockout语法。我可以在Github上找到wiki page，但没有当前的源代码。