如何通过KnockoutJS设置<option>元素的class属性

Question

我有select一个通过KnockoutJS视图模型填充的HTML 元素，如下所示：

<select data-bind="options: $data.answers,  optionsText: function(item) { return item.text }, value: selectedAnswer, optionsCaption: 'Choose...'"></select>

我想做的是通过某种方式设置class每个option元素的属性，以便最终得到：

<option class="someValue">12345</option>

可以在KnockoutJS中完成吗？我很难为此找到解决方案。

编辑：

foreach正如Artem所建议的，我刚刚尝试了绑定，它非常接近我想要的工作。但是有一个问题。

在Question对象上有一个订阅SelectedAnswer可观察对象的函数：

this.selectedAnswer.subscribe(function (answer) {}

使用foreach绑定时，subscribe()每个问题都会触发一次（在我选择答案之前不应该触发。我认为这是因为现在没有显示“选择...”选项）。

对于foreach绑定，我如何才能将默认文本设置回“ Choose ...”，并停止selectedAnswer.subscribe()触发直到用户选择了一个项目为止，而不是在填充列表时才停止。

编辑：

好的，这就是我的操作方式。

在KO viewmodel类中，我有一个布尔值bindingFinished，我在中检查selectedAnswer.subscribe()。如果是的false话，我们就从函数返回；如果为true，则照常进行。

另外，我通过Answer在数组的开头添加新的选项来为答案添加默认的“选择”选项。最终结果是，仅在用户选择了选项之后，才在绑定数据时不执行订阅功能。

非常感谢Artem的帮助。

Answer 1

您可以使用foreach绑定而不是options在select标签中：

<select data-bind="value: selectedAnswer">
    <option class="someValue">Choose...</option>
    <!-- ko foreach: $data.answers -->
    <option class="someValue" data-bind="value: $data, text: text"></option>
    <!-- /ko -->
</select>

这是工作小提琴：http://jsfiddle.net/vyshniakov/5bPWQ/1/

Answer 2

您可以使用optionsAfterRender绑定进行此操作。
它将为option生成的每个元素调用提供的函数。
您所要做的就是将类添加到元素中。

例：

HTML：

<select class="form-control" data-bind="options: list, 
        optionsAfterRender: addOptionClass"></select>

JS：

this.addOptionClass = function(optionElement) {
    optionElement.classList.add("form-control");
};