knockout.js - 用 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">

score 4 · Accepted Answer

attr 和 css 之间的主要区别在于 attr 绑定不仅适用于类绑定，而且适用于一般属性。它总是使用元素上的值创建新属性。因此，例如，如果您的元素上有另一个类，则与 class 绑定的 attr 将覆盖它。css 绑定将创建新的类属性，只要它还不存在。否则，它将附加到现有属性。

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

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

score 1 · Accepted Answer

attr: { class: name}绑定到整个类属性。所以你必须知道应用于元素的所有类。

css: name只绑定一个或多个命名类。因此，如果我有 HTML：

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

我最终可以上两个课：myclass和myOtherClass

我不确定你的class: name语法。我找不到任何关于它的文档？

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

2 回答 2