2

我有以下 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>

我要做的是通过计算函数动态设置元素的class属性：buttonisSelected

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尚未被选中而返回。但是，当我查看输出的 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 5 startsWith”。

任何人都可以帮助我吗？

4

1 回答 1

2

我将使用不同的方法：

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

所以我根本不打算使用计算函数，而是直接访问selected答案的属性。我通过这个 SO question 找到了这种技术：

KnockoutJS css 绑定！= true

于 2012-11-17T21:20:27.593 回答