1 
<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 ここ

質問: オプションで選択された値を使用して、外部コンテキストからオブザーバブルを更新する方法は?

4

1 に答える 1

4

select要素をバインドするときは、options方向ではなく方向を使用する必要がありforeachます。

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

ドキュメントを参照してください。

于 2013-10-24T13:19:00.850 に答える