敲除将 css 类绑定到观察到的模型属性答案

【问题标题】：Knockout binding css class to an observed model property敲除将 css 类绑定到观察到的模型属性
【发布时间】：2013-07-24 04:51:17
【问题描述】：

我想将 divs css 类绑定到视图模型的属性，如下所示：

<div id="statusIndicator" data-bind="css: selectedPriority">

但这会产生结果：

 <div id="statusIndicator" class=" 0 1 2 3">

这是视图模型：

myViewModel = {
    selectedPriority: ko.observable('High'),
    Company: ko.observable("Bert"),
    Rows: ko.observableArray([
         new row(),
         new row(),
         new row()
    ]),
    Tabs: ['High', 'Medium', 'Low'],

    selectPriority: function (tab) {
        this.selectedPriority(tab);
    }
};

因此，当我加载使用此视图模型的页面时，我希望 div 为：

<div id="statusIndicator" class="High">

我做错了什么？

【问题讨论】：

正如我在 RPNiemeyer 的回答中指出的那样，Knockout 2.2.0 现在似乎支持这些类型的动态类绑定。我在 2.1.x 中遇到了这个问题，并更新到 2.2.0，它现在可以工作了。
@ChrisJaynes 您应该将此评论作为答案。需要一段时间才能注意到它作为评论。
@CoderDennis - 与您描述的问题相同，所以我添加了关于淘汰赛 2.2.0 的答案。

标签： knockout.js

【解决方案1】：

对于这种情况你可以这样做：

<div data-bind="attr: { 'class': selectedPriority}">

此方法的唯一缺点是它将直接设置类而不是打开或关闭一个类，因此如果您使用多个类，那么selectedPriority 将需要包含完整的类列表。

【讨论】：

这仍然是在 Knockout 2.0 中执行此操作的方法吗？
是的，2.0还是一样。这里有一个绑定示例，可以打开和关闭一个类（而不是完成替换类属性）：github.com/SteveSanderson/knockout/wiki/Bindings---class。
感谢 RP，这就是我真正想要的。我知道 attr 绑定，但希望有一个仅用于“类”属性，并且链接中的那个可以按照我想要的方式处理它。此外，我确实尝试了 attr 绑定，它适用于除 iPad 之外的所有设备。我发现了一个关于它的特定于 Safari 的淘汰赛问题 (github.com/SteveSanderson/knockout/issues/233) 并尝试了带引号的解决方法，但无法使其正常工作。不过，使用 Steve 的自定义绑定，效果很好！
Knockout 2.2.0 现在似乎支持这些类型的绑定。我在 2.1.x 中遇到了这个问题，并更新到 2.2.0，它现在可以工作了。
有点相关：确保在包含特殊字符的类周围使用单引号。（即：“我的班级”而不是我的班级）

【解决方案2】：

看起来你不能直接从你的模型中设置一个类：http://knockoutjs.com/documentation/css-binding.html

你不能这样做：

 <div data-bind="css: { high: selectedPriority() == 1, medium: selectedPriority() == 2}">

【讨论】：

【解决方案3】：

正如@Chris Jaynes 在 cmets 中所暗示的，Knockout 2.2.0 使设置类名变得容易，正如 Knockout 作者 Steve Sanderson 的博客文章中所详述的那样。

http://blog.stevensanderson.com/2012/10/29/knockout-2-2-0-released/

根据帖子：

我们还让一些功能更像您一直拥有的那样工作认为他们应该工作。例如，css 绑定现在可以附加以编程方式生成元素的 CSS 类名称（以前，它仅限于切换预定义的 CSS 类名）

这篇博文还包含一个 jsfiddle，您可以使用它来查看绑定的实际效果。 http://jsfiddle.net/qRmfH/light/

注意他的示例中的css绑定语法css: chosenTicketCss，这是一个返回css类名的computed observable：

<p data-bind="visible: chosenTicket, css: chosenTicketCss">
    Excellent choice! Suits you perfectly.
</p>

【讨论】：

刚刚花了半天时间试图弄清楚为什么我的完全遵循文档的代码不起作用。原来我们仍然在 2.1 上，并且 css 绑定在 2.1 和 2.2 之间发生了变化。感谢您引导我朝着正确的方向了解 wtf 正在发生的事情。