在 foreach 中从 viewModel 实例化一个属性

Question

我正在使用淘汰赛的foreach 迭代一个对象。在这个 foreach 中，我渲染了一个表格，每个表格都有一个下拉列表。

我需要选择的值，但是 ko.observable() 在 foreach 中不起作用，因为它同时设置每个选择值。我需要每个字段的单独选择值，而不是将每个选择设置为相同的值。

有解决办法吗？

<!--ko foreach: {data: thing, as: 'blah'}-->
<div data-bind="text: JSON.stringify(blah)"></div>
<select data-bind="options: $root.countries, optionsText: 'name', optionsValue: 'id', value: $root.selectedChoice, optionsCaption: 'Choose..'"></select>
<br/>
<input type="button" data-bind="click: $root.sendMe, enable: $root.selectedChoice" Value="Click Me"/>
<!--/ko-->

This is a fiddle用一个简单的例子来演示。

Answer 1

如果您有多个下拉菜单，如果您想保存单个选择，您将需要多个可观察对象来存储所选值。例如：

var CountryModel = function (data) {
    var self = this;

    self.id = ko.observable(data.id);
    self.name = ko.observable(data.name);
};

var ViewModel = function (data) {
    var self = this;

    self.things = ko.observableArray([
        { blarg: 'blarg', selectedChoice: ko.observable() }, 
        { means: 'means', selectedChoice: ko.observable() }, 
        { yes: 'yes', selectedChoice: ko.observable() }
    ]);

    self.countries = ko.observableArray([
    	new CountryModel({ id: "1", name: "Russia" }),
    	new CountryModel({ id: "2", name: "Qatar" })
    ]);
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!--ko foreach: {data: things, as: 'thing'}-->
<div data-bind="text: ko.toJSON(thing)"></div>
<select data-bind="options: $root.countries,
                   optionsText: 'name', 
                   optionsValue: 'id', 
                   value: selectedChoice,
                   optionsCaption: 'Choose..'">        
</select>
<hr>
<!--/ko-->