4

我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对象上有一个订阅SelectedAnswerobservable 的函数：

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

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

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

编辑：

好的，这就是我的做法。

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

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

非常感谢 Artem 的帮助。

4

4 回答 4

6

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

例子：

HTML：

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

JS：

this.addOptionClass = function(optionElement) {
    optionElement.classList.add("form-control");
};
于 2016-02-12T15:05:19.710 回答
4

您可以使用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/

于 2012-11-23T11:30:59.690 回答
0

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

于 2014-04-23T09:25:06.947 回答
0

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

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

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

于 2017-01-04T14:43:36.240 回答