0

我正在尝试根据父选择的选择绑定子选择的内容。

从父列表中选择不同的项目时，子选择的内容似乎已正确更新。

但是，当您从子选择中选择一个项目时，它的内容将恢复为第一次绑定时提供的数据。

为什么子列表的内容会恢复？

下面的JsFiddle http://jsfiddle.net/Xbt6k/

HTML

<div id="upper">
<select size="5" data-bind="options: optionsUpper, value: selectedOptionUpper, event:{ change: changed }"></select>
</div>
<div id="lower">
    <select data-bind="options: optionsLower, value: selectedOptionLower" size="5"></select>
</div>

Javascript

var VM1 = function () {
    var self = this; 

    self.selectedOptionUpper = ko.observable();
    self.optionsUpper = ko.observableArray([1, 2]);

    self.changed = function () {
        var s = self.selectedOptionUpper();

        var data;

        if (s == 1) {
            data = ['one', 'two', 'three'];
        } else if (s == 2) {
            data = ['a', 'b', 'c'];
        }

        ko.applyBindings(new VM2(data), document.getElementById('lower'));
    };
};

var VM2 = function (data) {
    var self = this;

    self.selectedOptionLower = ko.observable();
    self.optionsLower = ko.observableArray(data);
};

ko.applyBindings(new VM1(), document.getElementById('upper'));
4

1 回答 1

0

我认为淘汰赛在两个选择中的绑定以及每次顶部更改时重新应用绑定之间感到困惑。

这是一种更“淘汰”的做事方式。这个例子有一个简单的视图模型，它包含一个项目数组。每个项目都包含要在上部选择中显示的数据以及要在下部选择中显示的项目数组：

function ViewModel() {
    var self = this;

    self.selectedOptionUpper = ko.observable();
    self.selectedOptionLower = ko.observable();
    self.optionsUpper = [
        { data: 1, items: [ 'one', 'two', 'three' ]},
        { data: 2, items: [ 'a', 'b', 'c' ]}
        ];
    self.showData = function() {
        alert('upper: ' + self.selectedOptionUpper().data + ', lower: ' + self.selectedOptionLower());
    };
}

ko.applyBindings(new ViewModel());

接下来是 HTML 绑定。请注意，下部选择绑定到上部选择中选择的任何内容的“项目”集合（当未选择任何内容时，对初始页面加载进行空检查）：

<div id="upper">
    <select size="5" data-bind="options: optionsUpper, optionsText: 'data', value: selectedOptionUpper"></select>
</div>
<div id="lower">
    <select data-bind="options: selectedOptionUpper() ? selectedOptionUpper().items : [], value: selectedOptionLower" size="5"></select>
</div>
<input type="button" data-bind="click: showData" value="Show" />

这是jsFiddle。

于 2013-05-03T23:49:09.450 回答