在不使用 jQuery 的情况下使用顺序选项值填充淘汰赛中的下拉列表答案

【问题标题】：Populate a dropdown in knockout with sequential option values without jQuery在不使用 jQuery 的情况下使用顺序选项值填充淘汰赛中的下拉列表
【发布时间】：2013-01-07 02:09:34
【问题描述】：

我正在尝试使用淘汰赛填充下拉列表。我用来填充 optionsText 的数组是一个 JSON 对象数组。我需要 optionsValue 是数组中对象的索引或序号。

我的 viewModel 中有以下代码：

    self.job.submitOptionsArray = this.collection.toJSON();
    this.job.applyPreset = ko.observableArray(self.job.submitOptionsArray);

在我看来：

<select name="" id="applyPreset" data-bind="options: applyPreset, optionsText: 'name', optionsValue: '???', value: somfn"></select>

我需要一个不使用 jQuery 的解决方案。

【问题讨论】：

标签： javascript backbone.js knockout.js

【解决方案1】：

您可以格式化您的对象，以便根据您的收藏设置索引。您可以通过手动订阅执行一次或每次更改数组时执行此操作。

this.job.applyPreset = ko.observableArray(self.job.submitOptionsArray);
this.job.applyPreset.subscribe(function(arrayValue) {
    var index = 0;
    ko.utils.arrayForEach(arrayValue, function(arrayItem){
        arrayItem.index = index++;
    })
})

将index 用作您的optionsValue，然后您就设置好了。

【讨论】：

谢谢，看到其他 cmets，我做了非常相似的事情，基本上，只是添加了一个没有订阅的 id 字段，因为一旦获取数据，它就永远不会改变。

【解决方案2】：

您可能会发现，在您的情况下，使用 foreach 绑定手动创建选项更有益，而不是使用选项绑定。

例如：

<select data-bind="value: someValue, foreach: options">
    <option data-bind="text: title, attr: {value: $index()}"></option>
</select>
<div data-bind="text: someValue"></div>

你的选择可以是任何东西，我只是用这个测试了它：

self.options = ko.observableArray([{
   title: "Some text",
   otherData: "someOtherData",
   evenMore: "even more Data"
 }, {
   title: "Some text 2",
   otherData: "someOtherData",
   evenMore: "even more Data"
 }, {
   title: "Some text 2",
   otherData: "someOtherData",
   evenMore: "even more Data"
 }]);

如果要包含标题，只需将 foreach 绑定移动到虚拟元素中，然后在其余选项上方手动添加一个选项。

【讨论】：

【解决方案3】：

你必须自己解决这个问题，optionsValue 只能指向对象上的一个成员。如果您不提供 optionsValue，则该值将是对象本身。

如果对象有一个 id 成员，则使用它，或者使用带有写入实际索引的 write 方法的计算 observable，而不是底层 observable..

【讨论】：