Javascript foreach绑定中select选项和值的Knockout.js绑定

我正在尝试创建一组下拉列表，以便可以动态地向该集合添加新的下拉列表。一个例子是订购比萨饼的表格，上面有一组配料选择标签。我们不知道用户想要多少浇头，所以我们将从一个开始，并在用户选择第一个浇头时动态添加一个新的选择

我遇到的问题是select上的值绑定工作不正常。如果最初设置了value对象，select将绑定到它，但是任何更改都不会更新VM中的可观察对象

我尝试了各种不同的方法基于$data进行绑定，使用别名，使用不同的上下文返回到对象，使用虚拟元素在不同的位置绑定上下文，等等

这个例子有点做作，因为可能会涉及其他代码来实际添加更多选择，等等，但它确实复制了我看到的问题。只需选择几个浇头，然后单击“检查值”按钮，即可找到VM中未设置的选项

检查值
函数ViewModel（）{
var self=这个；
this.nameOptions=ko.observableArray（[]）；
this.selectedPropertyNames=ko.observearray（[]）；
var firstSelection=ko.可观察（空）；
this.selectedPropertyNames.push（第一选择）；
var secondSelection=ko.可观察（“牛肉”）；
this.selectedPropertyNames.push（第二选择）；
这个.名称选项（[‘意大利香肠’、‘牛肉’、‘菠萝’、‘青椒’、‘额外奶酪’）；
this.checkValues=函数（）{
对于（var i=0；i

问题在于foreach数据绑定

<!-- ko foreach: {data: selectedPropertyNames} -->
<select data-bind="options:$root.nameOptions, value: $data, optionsCaption:'Pick One'"></select>
<!-- /ko -->

您将值绑定到$data，后者是变量的内容，而不是变量引用本身。如果您将绑定更改为

<select data-bind="options:$root.nameOptions, value: $root.selectedPropertyNames()[$index()], optionsCaption: 'Pick One'"></select>

---

那它就可以正常工作了。更新的小提琴在

谢谢，奇怪的巧合也发现了这一点。没有意识到$data已展开。

<select data-bind="options:$root.nameOptions, value: $root.selectedPropertyNames()[$index()], optionsCaption: 'Pick One'"></select>