Knockoutjs css绑定无法正常工作

Question

（使用KnockoutJs 2.0.0）

我的viewmodel中有一个电话号码列表。 每个电话号码都有一个类型（家庭，工作，移动等）。 我想在每个电话号码旁边显示一个图标（基于一个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() - 但这些都不适合我。

我在这里愚弄了一些代码来证明这个问题。 如果检查表项的span元素，您将看到它几乎看起来好像数据绑定将返回的字符串视为字符数组并基于索引设置类而不是将返回的字符串视为类。

我确信这是完全明显的事情，但我一直在打我的头无济于事。

Answer 1

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

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

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

或者，您可以定义一个自定义绑定来稍微清理计算函数，但应注意，在这种情况下，所有类都将被绑定的输出替换。 这可能在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

Answer 2

固定

例

我将您的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执行此操作，但我找不到以前版本的文档。 我想如果该功能存在，该问题与语法有关。

Answer 3

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

因此，您仍然需要使用computed来设置observable：

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

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

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