Question

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

<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绑定，如何将默认文本设置回“选择...”并停止发送selectedAnswer.subscribe()直到用户选择了某个项目，而不是列表时正在填充。

编辑：

好的，我就是这样做的。

在KO viewmodel类中，我有一个布尔bindingFinished，我在selectedAnswer.subscribe()内检查。如果false那么我们只是从函数返回;如果是真的那么继续正常。

此外，我通过在数组的开头添加新的Answer为答案添加默认的“选择”选项。最终结果是，只有在用户选择了选项后，才会在绑定数据时执行subscribe函数。

非常感谢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"); };

Answer 3

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

Answer 4

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

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

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

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

4 个答案: