使用敲除可观察数组填充下拉列表
问题描述:
我想绑定2下拉列表来敲除可观察数组。条件是第一个下拉列表必须先填充。第二个下拉列表取决于第一个下拉列表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();
}
});
,以获得相应的认证功能和speciaizations是
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在提前。
答
在KnockOut中,数组的值与下拉列表中的选项分开。您不会更改observableArray,而是可观察值本身。不过,更好的办法是使用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);
然后使用从数据集返回的viewmodel设置这些值,这应该是数据库表中的ID字段(CertificationID,SpecializationID)。