1

私は次の問題を抱えており、私の問題を説明するために小さなフィドルを作成しました。

コードに次のビューモデルがあります。

var InnerModel = function(n){
    var self = this;
    self.name = ko.observable(n);
    self.selectedOption = ko.observable('Option2');
};

var OuterModel = function(){
    var self = this;
    self.inners = new ko.observableArray([new InnerModel('A'), new InnerModel('B')]);
    self.options = ['Option1', 'Option2', 'Option3'];
};

var viewModel = new OuterModel();

ko.applyBindings( viewModel);

さらに、次の関連する HTML があります。

<table>
    <tbody data-bind="foreach: inners">
        <tr>
            <td>
                <p data-bind="text: selectedOption"></p>
            </td>
            <td>
                <select data-bind="options: $root.options,
                                   value: selectedOption"></select>
            </td>
        </tr>
    </tbody>
</table>

これは期待どおりに機能します。選択ボックスは Option2 が選択された状態で始まり、選択ボックスで新しいオプションを選択すると、InnerModel.selectedOption もその値を変更します。だからここですべてが良いです。

しかし、私の場合、OuterModel のオプション リストを文字列の配列以上にする必要があるため、次のように変更しました。

self.options = [{ name: 'Option1', value: 1},{ name: 'Option2', value: 1},{ name: 'Option3', value: 1}];

次に、HTMLoptionsText: 'name'で、選択ボックスのデータ バインディングに追加しました。

選択ボックスには引き続き 3 つの有効なオプションが表示されますが、Knockout はテキスト 'Option2' を OuterModel.options に含まれるオプションの 1 つに一致させるのに苦労するため、self.selectedOption へのリンクは機能しなくなります (予想どおり)。リスト。

InnerModel.selectedOption を変更してバインディングを以前と同じように機能させる方法はありますか? 配列からの実際のオプションを使用して OuterModel から InnerModel への参照を送信することは、実際のアプリケーションでは完全に分離されているため、オプションではありません。

4

1 に答える 1

1

このコードでは、期待どおりに動作します。

HTML:

<table>
    <tbody data-bind="foreach: inners">
        <tr>
            <td>
                <p data-bind="text: selectedOption"></p>
            </td>
            <td>
                <select data-bind="options: $root.options,
                optionsText: 'name',
                optionsValue: 'value',
                value: selectedOption"></select>
            </td>
        </tr>
    </tbody>
</table>

JavaScript:

var InnerModel = function(n){
    var self = this;
    self.name = ko.observable(n);
    self.selectedOption = ko.observable(2);
};



var OuterModel = function(){
    var self = this;
    self.inners = new ko.observableArray([new InnerModel('A'), new InnerModel('B')]);
    self.options = [{ name: 'Option1', value: 1},{ name: 'Option2', value: 2},{ name: 'Option3', value: 3}];
};

var viewModel = new OuterModel();

ko.applyBindings(viewModel);

オブジェクトを選択タグにバインドする場合は、optionValue プロパティもバインドする必要があります。また、ノックアウトは常に、html の value 属性によって定義済みの選択された値を選択するため、オプション オブジェクト配列の有効な値である self.selectedOption である必要があります。

于 2013-08-02T06:30:43.510 に答える