Knockout.js-使用另一个下拉列表的值重新加载具有新选项的下拉列表

Question

我看到过类似的事情，人们希望在ASP.NET、通用JavaScript、PHP等中做到这一点，但现在我们有了KnockOut，它会给事情带来麻烦，因为它的字段已经动态呈现了。现在我想在另一个下拉列表更改时重写它。。。动态加载之上的动态加载，全部采用老式级联样式。。。。

我有一个下拉列表，我称之为"ourTypes"，当更改时，应该将"slots"下拉列表的选项重新写入其左侧。我有一个.subscribe()函数，它根据我从"ourTypes"值中得到的限制创建新选项。一切都很好，但我们如何使下拉列表真正反映这些新的价值观？

HTML:

<select data-bind="options: $root.slots, optionsValue: 'Value', optionsText: 'Text', value: $data.SlotPosition"></select> 
<select data-bind="options: $root.ourTypes, optionsValue: 'ID', optionsText: 'Name', value: $data.OurTypeId"></select>

JavaScript:

var slots = [
    { Text: "1", Value: "1" },
    { Text: "2", Value: "2" },
    { Text: "3", Value: "3" }
];
var ourTypes = [
    { ID:"1", Name:"None", Limit:0 },
    { ID:"2", Name:"Fruits", Limit:5 },
    { ID:"3", Name:"Vegetables", Limit:5 },
    { ID:"4", Name:"Meats", Limit:2 }
];
var dataList = [        
    { SlotPosition: "1", OurTypeId: 4 },
    { SlotPosition: "2", OurTypeId: 2 },
    { SlotPosition: "3", OurTypeId: 3 }
];
var myViewModel = new MyViewModel(dataList);
ko.applyBindings(myViewModel);
function MyViewModel(dataList) {
    var self = this;
    self.slots = slots;
    self.ourTypes = ourTypes;
    self.OurTypeId = ko.observable(dataList.OurTypeId);
    self.SlotPosition = ko.observable(dataList.SlotPosition);
    self.OurTypeId.subscribe(function() {
        if (!ko.isObservable(self.SlotPosition))
            self.SlotPosition = ko.observable("1");
        // Get our new limit based on value
        var limit = ko.utils.arrayFirst(ourTypes, function(type) {
            return type.ID == self.OurTypeId();
        }).Limit;  
        // Build options here
        self.slots.length = 0;
        self.slots.push({Text:"",Value:""});
        for (var i=1; i < limit+1; i++) {
            self.slots.push({Text:i, Value:i});
        }
        // What else do I do here to make the dropdown refresh
        // with the new values?
    });
}

Fiddle：http://jsfiddle.net/navyjax2/Lspwc4n4/

Answer 1

我们刚刚对代码进行了一些小的更改

视图模型：

        self.slots = ko.observableArray(slots); //should make it observable
        self.ourTypes = ko.observableArray(ourTypes);
        self.OurTypeId = ko.observable(dataList[0].OurTypeId); // initial value setting 
        self.SlotPosition = ko.observable(dataList.SlotPosition);
       //Inside subscribe 
        self.slots([]);  // clearing before filling new values 

工作小提琴此处