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

Question

我看到过类似的事情，人们希望在 ASP .NET、通用 JavaScript、PHP 等中执行此操作，但现在我们有了 KnockOut，因为它的字段已经动态呈现.现在，我想在更改另一个下拉列表时重写一个下拉列表...动态加载在动态加载之上，所有这些都采用老式的级联样式....

我有一个下拉菜单，“ourTypes”，我已经调用了它，当更改时，应该将“插槽”下拉菜单的选项重新写入其左侧。我有一个.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?
    });
}

小提琴：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 

工作小提琴here