knockout.js - 为什么 KnockoutJS 将类属性设置为 "0 1 2 3 4 5 startsWith"？

Question

我有以下 HTML 片段:

<table class="answerGrid" data-bind="foreach: rows">
    <tr data-bind="foreach: $data">
        <td>
            <button data-bind="click : $root.onAnswerClick, css: isSelected" type="button">
                <div data-bind="html: $data.text" style="height: 100%"></div>
            </button>
        </td>
    </tr>
</table>

我想做的是通过 isSelected 计算函数动态设置 button 元素的 class 属性:

var Answer = function () {
    var self = this;

    self.id = "";
    self.text = "";
    self.selected = ko.observable(false);

    self.isSelected = ko.computed(function () {
        return self.selected() ? "selected-answer" : "answer";
    }, self);
};

该函数正在执行，并且我检查了由于尚未选择Answer而返回了文本“answer”。但是，当我查看输出的 HTML 时，它看起来像这样:

<td>
    <button data-bind="click : $root.onAnswerClick, css: isSelected" type="button" class="0 1 2 3 4 5 startsWith">
        <div data-bind="html: $data.text" style="height: 100%">4-7 days</div>
    </button>
</td>

我完全困惑为什么 KO 将 class 属性设置为“0 1 2 3 4 5startsWith”。

有人可以帮我吗？

Answer 1

我将使用不同的方法:

<button data-bind="css: { 'answer': !selected(), 'selected-answer': selected() }" type="button">
    <span>Testing</span>
</button>​

所以我根本不会使用计算函数，而是直接访问答案的 selected 属性。我通过这个问题找到了这项技术:

KnockoutJS css binding != true