KnockoutJS 选项绑定，无法在父上下文中设置值

KnockoutJS options binding, unable to set value in parent context

本文关键字：上下文 设置 选项 绑定 KnockoutJS      更新时间：2023-09-26
<select data-bind='foreach: theOptions'>
    <option data-bind='text: name, value: $root.watchThis().something'></option>
</select>
You have selected <p data-bind="text: watchThis().something"></p>
Json model.
<p data-bind="text: ko.toJSON(watchThis)"></p>

显示选项，但是当我更改值时，相对可观察量不会更新。更多代码：

function FooModel() {
    this.something = ko.observable();   
}
function VM() {
    var self = this;
    self.watchThis = ko.observable(new FooModel());
    self.theOptions = ko.observableArray();
    self.theOptions([
        {id:1, name: 'foo'},
        {id:2, name: 'bar'},
        {id:3, name: 'baz'}
    ]);
}
ko.applyBindings(new VM());

我也试过 

<option data-bind='text: name, value: $root.watchThis().something'></option>
<option data-bind='text: name, value: $root.watchThis.something'></option>
<option data-bind='text: name, value: $parent.watchThis().something'></option>
如果我

像这样显式初始化值，似乎最糟糕的是

function FooModel() {
    this.something = ko.observable(2);   
}

一切看起来都很好，但是当我切换选项时，可观察量不会更新。

JSFiddle here

问题是：如何使用选项选定值从外部上下文更新可观察量？

绑定 select 元素时，必须使用options方向，而不是foreach：

<select data-bind="options: theOptions,
                   optionsText: 'name',
                   optionsValue: 'id',
                   value: watchThis().something">
</select>

请参阅文档。

相关文章：