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() - 但这些都不适合我。 / p>

我发现了一些证明问题的代码here。如果检查表项的span元素，您将看到它几乎看起来好像数据绑定将返回的字符串视为一个字符数组并根据索引设置类而不是处理返回的字符串作为一个班级。

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

Answer 1

计算的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

<强>修正

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可能有办法实现这一点，但我找不到以前版本的文档。我想如果该特征存在，该问题与语法有关。

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>

Knockoutjs css绑定无法正常工作

3 个答案: