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>