使用敲除可观察数组填充下拉列表

Question

我正在尝试将 2 个下拉列表绑定到可观察到的淘汰赛 arrays.The 条件是必须填充第一个下拉列表 first.The 第二个下拉列表取决于第一个下拉列表list.Hence 我正在订阅第一个下拉列表以填充第二个下拉列表。为了尝试实现这一点，我编写了以下代码

HTML 是

       <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Certification:</label>
            <div class="col-sm-6">
                <select class="form-control" id="certification" name="certification" data-bind="value: certification, options: certificationArray, optionsText: 'Certification', optionsValue: 'CertificationID', optionsCaption: 'Select a Certification'">
                </select>
            </div>
        </div>
    <div class="form-group">
             <label class="col-sm-2 control-label labelfont">Specialization:</label>
            <div class="col-sm-6">
                <select class="form-control" id="specialization" name="specialization" data-bind="value: specialization, options: specializationArray,optionsText:'Specialization',optionsValue:'SpecializationId', optionsCaption: 'Select a Specialization'">
                </select>
            </div>
        </div>

视图模型是

   self.specializationArray = ko.observableArray([]);
   self.certificationArray = ko.observableArray([getCertifications()]);
   self.certification = ko.observable("");
   self.specialization = ko.observable("");
   self.certification.subscribe(function () {
    self.specializationArray([]);
    getSpecializations();    
    }
});

获得相应认证和专业化的功能是

 var getCertifications = function () {
$.getJSON("/Provider/GetCertifications", function (data) { 
    return data;
    });
});
};
    var getSpecializations = function () {
$.getJSON("/Provider/GetSpecializations/", { certificationID: $("#certification").val() }, function (data) {       
    self.specializationArray(data) 
   })
 }

JSON 响应如下所示 JSON 看起来像这样有人可以指导我正确的方向吗，我对淘汰赛是全新的，JSON.I 我已经无能为力 here.So，任何帮助都会提前 appreciated.Thanks。

Answer 1

在 KnockOut 中，数组的值与下拉列表的选项是分开的。您不会更改 observableArray，但会更改 observable 本身的值。不过，更好的方法是使用 ko.computed 字段来保存第二个下拉列表的值。

不过，我真的不明白为什么您认为您的下拉菜单必须按特定顺序绑定。根据您的问题，我不确定认证和专业化之间的关系。您实际上并没有在 self.certification.subscribe() 中做任何事情，就像填写专业化时有任何依赖关系一样。您在认证中提供的 JSON 也没有任何相关的专业化外键。但是，如果您的 JSON 认证看起来像这样：

[{"CertificationID": 1, "Certification": "M.B.B.S.", "SpecializationID": "7"},{"CertificationID": 2, "Certification": "M.D.", "SpecializationID": "3"}, ...]

而专业化的 JSON 看起来像这样...

[{"SpecializationID": 1, "Specialization": "Cardiology"},
 {"SpecializationID": 2, "Specialization": "Dentistry"}, 
 {"SpecializationID": 3, "Specialization": "General Practioner"}, ...
 {"SpecializationID": 7, "Specialization": "Surgery"}
]

我相信这样的事情应该有效：

self.specialization = ko.computed(function() {        
    return ko.utils.arrayFirst(getCertifications(), function(certs) {
        return certs.ID == self.SpecializationID();
    }).SpecializationID;        
});

但是因为我没有看到你有任何依赖关系，在这里，为什么不直接填写它们：

self.certificationArray = ko.observableArray(getCertifications());
self.specializationArray = ko.observableArray(getSpecializations());
self.certification = ko.observable(vm.certification);
self.specialization = ko.observable(vm.specialization);

然后使用从数据集返回的视图模型设置这些值，这些值应该是数据库中的 ID 字段 table（CertificationID、SpecializationID）。

使用敲除可观察数组填充下拉列表

Populating dropdownlist using knockout observable array

javascript

json

knockout-2.0

knockout-mvc