如何通过 KnockoutJS 设置 <option> 元素的类属性答案

【问题标题】：How to set an <option> element's class attribute via KnockoutJS如何通过 KnockoutJS 设置 <option> 元素的类属性
【发布时间】：2017-01-04 22:43:36
【问题描述】：

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

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

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

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

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

编辑：

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

在Question 对象上有一个订阅SelectedAnswer observable 的函数：

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

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

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

编辑：

好的，这就是我的做法。

在 KO 视图模型类中，我有一个布尔值 bindingFinished，我在 selectedAnswer.subscribe() 内部检查它。如果false 那么我们只是从函数中返回；如果为真，则照常进行。

我还通过在数组的开头添加一个新的Answer 来为答案添加一个默认的“选择”选项。最终的结果是，在绑定数据的时候，订阅功能没有被执行，只有在用户选择了一个选项之后。

非常感谢 Artem 的帮助。

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以使用optionsAfterRender 绑定来做到这一点。
它将为其生成的每个 option 元素调用提供的函数。
您所要做的就是将类添加到元素中。

示例：

HTML：

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

JS：

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

【讨论】：

这是正确的答案，应该以正确的方式完成，由文档支持。

【解决方案2】：

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

<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/

【讨论】：

有奇怪的行为，似乎选择的值没有正确绑定
我刚刚遇到了与此类似的问题，所以请注意，在选择菜单中使用 cmets 在 IE9 中不起作用...github.com/knockout/knockout/issues/578

【解决方案3】：

对我来说，使用所选值 (selectedAnswer) 的代码在应用此修复后出现错误。我通过将value="" 添加到默认选项（选择...）来解决此问题。

【讨论】：

【解决方案4】：

根据以前的答案，我刚刚找到了另一种方法

   <select data-bind="foreach: yourArray">
     <option data-bind="value: IdValue, text: TextValue, attr: { customAttr: anyValueField }"></option>
   </select>

它对我有用。我希望它对其他人有所帮助

【讨论】：