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}];

optionsText: 'name'然后在我添加到选择框上的数据绑定的 HTML中。

选择框现在仍显示三个有效选项，但指向 self.selectedOption 的链接不再起作用（如预期的那样），因为 Knockout 很难将文本“Option2”与 OuterModel.options 中包含的选项之一匹配列表。

有什么办法可以更改 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 必须是 options obect 数组的有效值。

于 2013-08-02T06:30:43.510 回答