Question

我正在使用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);
};

我可以看到函数已执行，sicne我在其中放置的断点被点击，但呈现的HTML看起来像这样：

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

由于某种原因，没有设置class属性。例如，我期待某个地方的“class =”red“'。

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

Answer 1

有效。你看到这样的html因为scoringLevel的默认值是0而你的计算结果返回空字符串。如果将其更改为例如1，则会为该选项指定红色类。

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

Answer 2

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

我所做的唯一更改是使用$index作为选项值，并在绑定中删除不需要的$data +在Answer类中略微简化。

KnockoutJS中的CSS绑定根本不起作用

2 个答案: