Заполнение выпадающего списка с использованием наблюдаемого массива нокаута

Question

Я пытаюсь привязать 2 выпадающих списка к нокаутируемым наблюдаемым массивам. Условие состоит в том, что первый выпадающий список должен заполняться первым. Второй выпадающий список зависит от первого выпадающего списка. Поэтому я подписываюсь на первый раскрывающийся список для заполнения второго раскрывающегося списка. Чтобы попытаться достичь этого, я написал следующий код

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. Я нахожусь в конце моего остроумия здесь. Так что, любая помощь будет принята с благодарностью. Спасибо заранее.

Answer 1

В KnockOut значения массивов отделены от параметров, которые получают раскрывающиеся списки. Вы не измените observableArray, но само значение observable. Лучше, однако, было бы использовать ko.computed поле для хранения значения 2-го выпадающего списка.

Я не очень понимаю, почему вы думаете, что ваши выпадающие должны быть связаны в определенном порядке. Я не совсем уверен, как сертификаты и специализации связаны друг с другом из вашего вопроса. Вы на самом деле ничего не делаете в 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);

И вы устанавливаете эти значения с помощью модели представления, возвращаемой из набора данных, который должен быть полями идентификатора в вашей таблице базы данных (CertificationID, SpecializationID).