Knockoutjs css绑定不起作用答案

【问题标题】：Knockoutjs css binding not workingKnockoutjs css绑定不起作用
【发布时间】：2015-12-19 17:39:41
【问题描述】：

（使用 KnockoutJs 2.0.0）

我的视图模型中有一个电话号码列表。每个电话号码都有一个类型（家庭、工作、手机等）。我想在每个电话号码旁边显示一个图标（基于 fontawesome 类）。

如果我对 css 绑定中的图标进行硬编码，一切正常：

<tbody data-binding="foreach: phoneList">
    <tr>
       <td><span data-bind="css: {'icon-home' : TypeId() == 1, 'icon-building': TypeId() == 2, ... , 'icon-phone': TypeId() >= 7></span></td>
    ...
</tbody>

我想用一个函数调用来替换硬编码列表。我最初尝试将函数添加到父对象但没有成功，所以我尝试将函数直接添加到电话对象本身作为函数和ko.computed() - 但这些都不适合我。

我已经编写了一些代码here 来演示这个问题。如果您检查表项的 span 元素，您会发现它几乎看起来好像数据绑定将返回的字符串视为字符数组并根据索引设置类，而不是将返回的字符串视为类。

我确信这很明显，但我一直在努力无济于事。

【问题讨论】：

当我将您的 KO 版本从 2.0 更新到 3.0 时，绑定似乎可以正常工作。这使我相信您正在为依赖于较旧 KO 实例的版本使用较新的语法。但是，无论哪种方式，您的计算都需要一些工作才能正确评估。
@DanielBrown 我认为它们仍然不起作用：plnkr.co/edit/j4DOkz4vnAJoNt4DfAko。您可以看到最后三个示例中的两个数字都是蓝色的，而想要的效果是红色 1 和蓝色 2。
将计算结果更改为 me.getClass = ko.computed(function() { return this.typeId() == 1 ? "mobile" : "business"; }, me); 可解决此问题（更新到您的 KO 版本）
谢谢丹尼尔。这是一个很大的帮助。

标签： javascript css knockout.js

【解决方案1】：

计算出的 observable 应该可以正常工作。问题是你从那个计算出来的 observable 中返回了什么。您需要以与硬编码版本相同的格式返回类的定义：

me.getClass = ko.computed(function() {
    return me.typeId() == 1 ? { 'mobile': true } : { 'business': true };
});

在此处查看更新版本：http://plnkr.co/edit/qDjgMlZpXHjn5ixY3OCt

或者，您可以定义一个自定义绑定来稍微清理计算函数，但应该注意的是，在这种情况下，所有类都将被绑定的输出替换。正如 cmets 和其他答案中提到的那样，这在 Knockout 3.0.0 中可能不是必需的。

绑定：

ko.bindingHandlers.setClass = {
    update: function(element, valueAccessor, allBindings) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        element.className = value;
    }
};

可观察：

me.setClass = ko.computed(function() {
    return me.typeId() == 1 ? "mobile" : "business";
});

HTML：

<td data-bind="setClass: setClass, text: typeId"></td>

使用自定义绑定的版本在这里：http://plnkr.co/edit/ryaA4mIf7oh5Biu8bKj0?p=info

【讨论】：

谢谢德鲁，成功了。另外，丹尼尔，谢谢。似乎 3.0 以我喜欢的方式处理事情——我只是不确定我是否可以在当前系统中使用 3.0。我将不得不玩它，看看是否有任何问题。

【解决方案2】：

修复

Example

我已将您的 KO 版本更新为 3.0。

接下来，我将 getClass 的 ko.computed 绑定更改为：

me.getClass = ko.computed(function() { return me.typeId == 1 ? "mobile" : "business"; });

到：

me.getClass = ko.computed(function() { return this.typeId() == 1 ? "mobile" : "business"; }, me);

注意

KO 2.0 可能有办法做到这一点，但我找不到以前版本的文档。如果该功能存在，我想这个问题与语法有关。

【讨论】：

【解决方案3】：

另一种方法是使用 attr 数据绑定，而不是使用自定义绑定处理程序来设置元素上的类。

因此，您仍然需要使用计算来设置可观察对象：

me.setClass = ko.computed(function() {
    return me.typeId() === 1 ? "mobile" : "business";
});

然后使用 attr 绑定在 html 元素上设置类：

<td data-bind="attr: { class: setClass }, text: typeId"></td>

【讨论】：