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

工作fiddlehere

Knockout.js - 使用另一个下拉菜单的值重新加载包含新选项的下拉菜单

Knockout.js - Reload a dropdown with new options using the value of another drop down

mvvm

drop-down-menu

viewmodel

cascadingdropdown