1

我正在使用 KO 的 2.2.0 版本，我正在尝试为option这样的元素设置 CSS：

<select data-bind="foreach: $data.answers, value: selectedAnswer">
    <option data-bind="css: $data.getScoringLevel, value: $data, text: $data.text"></option>
</select>

这是 getScoringLevel() 函数：

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

    self.id = '';
    self.text = '';
    self.sendAnswerToWebService = true;
    self.scoringLevel = ko.observable(0);

    self.getScoringLevel = ko.computed(function () {
        switch (self.scoringLevel()) {
            case 1:
                return 'red';
            case 2:
                return 'orange';
            case 3:
                return 'yellow';
            default:
                return '';
        }
    }, self);
};

我可以看到该函数已执行，因为我在其中放置的断点被命中，但呈现的 HTML 如下所示：

<option data-bind="css: $data.getScoringLevel, value: $data, text: $data.text" value="">Choose....</option>

class由于某种原因没有设置属性。例如，我期待在某个地方出现 `class="red"'。

有人可以告诉我我做错了什么吗？

4

2 回答 2

1

有用。您会看到这样的 html，因为默认值为scoringLevel0 并且您的计算返回空字符串。如果您更改它，例如更改为 1，则会将红色类分配给该选项。

这是一个小提琴：http: //jsfiddle.net/vyshniakov/DtDk7/1/

于 2012-11-23T14:34:26.383 回答
1

另一个要查看的示例：http: //jsfiddle.net/TqgHb/3/（修订版 3 修复了 JSLint 警告 + 使用this而不是关闭self）

我所做的唯一更改是使用$index选项值并删除$data绑定中不需要的内容 + 对 Answer 类进行轻微简化。

于 2012-11-23T15:04:39.100 回答