2015-02-08 166 views
1

我想绑定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响应看起来像这样 enter image description here 和JSON看起来像这样 enter image description here 可能有人请指引我的方向是正确的,我完全新的敲除和JSON.I我在我束手无策here.So,任何帮助将大大appreciated.Thanks在提前。

回答

1

在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)。