Моя модель просмотра не соответствует моим выборам

Question

Я использую cascading dowpdowns в списке. Пользовательский интерфейс работает нормально, но базовая модель просмотра не обновляется с выбором пользователя.

У меня есть следующий HTML:

<ul data-bind="foreach: selectedExams"> 
<li> 
    <select data-bind="options: $parent.availableExams, optionsCaption: 'Choisir un type...', optionsText: 'examTypeName', value: examtype"></select> 
    <select data-bind="options: exams, optionsCaption: 'Choisir un examen...' , optionsText: 'examName',value: exam, enable:exams().length"></select> 
    <a href="#" data-bind="click: $parent.remove">Remove</a> 
</li> 
</ul> 
<button data-bind="click: add">Add</button> 
<pre data-bind="text: ko.toJSON($root.selectedExams, null, 2)"></pre> 

файл расслоение плотной:

function AppViewModel() { 
    var self = this; 

    self.availableExams = [ 
      { 
       examTypeId: "SCAN", examTypeName: "Scanner", exams: [ 
        { examId: "SCOEUR", examName: "SCOEUR" }, 
        { examId: "SANGIO", examName: "SANGIO abdominopelvien" }, 
        { examId: "SSINUS", examName: "SSINUS sans inj" } 
       ] 
      }, 
      { 
       examTypeId: "RX", examTypeName: "Radio", exams: [ 
        { examId: "RBRAS", examName: "RBRAS" }, 
        { examId: "RAVBRAS", examName: "RAVBRAS" }, 
        { examId: "RBASSIN", examName: "RBASSIN 1 inc + rx bilat COXO FEMO 1/2 inc" } 
       ] 
      }, 
      { 
       examTypeId: "IRM", examTypeName: "IRM", exams: [ 
        { examId: "ITETE", examTypeId: "IRM", examName: "ITETE angio IRM enceph" }, 
        { examId: "IRACHIS", examTypeId: "IRM", examName: "IRACHIS 1/2 segt avec INJ" }, 
        { examId: "ITHORAX", examTypeId: "IRM", examName: "ITHORAX sans inj" } 
       ] 
      } 
    ]; 

    self.selectedExams = ko.observableArray([new selectedExam()]); 
    self.add = function() { 
     self.selectedExams.push(new selectedExam()); 
    }; 
    self.remove = function (exam) { self.selectedExams.remove(exam) } 
} 


var selectedExam = function() { 
    self.examtype = ko.observable(undefined); 
    self.exam = ko.observable(undefined); 
    self.exams = ko.computed(function() { 
     if (self.examtype() == undefined || self.examtype().exams == undefined) 
      return []; 
     return self.examtype().exams; 
    }); 
} 

ko.applyBindings(new AppViewModel()); 

В результате, для 3-х линий различных выборов заключается в следующем:

[ 
    {}, 
    {}, 
    {} 
] 

Я ожидая увидеть это, например:

[ 
    {"SCAN","SCOEUR"}, 
    {"RX", "RBRAS"}, 
    {"IRM", "ITETE"} 
] 

Это, вероятно, проблема с привязкой данных, но я не знаю, с чего начать отлаживать эту проблему.

Обратите внимание: я использую этот код в сетке бутстрапа.

Любая помощь оценена. Спасибо заранее.

Answer 1

Проблема в том, что у вас отсутствует определение self в функции конструктора selectedExam. В настоящее время ваш self на самом деле ссылается на window (глобальный контекст), поэтому вы заканчиваете пустые возвращаемые объекты.

Попробуйте это:

var selectedExam = function() { 
    var self = this; // <-- add this 

    self.examtype = ko.observable(undefined); 
    self.exam = ko.observable(undefined); 
    self.exams = ko.computed(function() { 
     if (self.examtype() == undefined || self.examtype().exams == undefined) 
      return []; 
     return self.examtype().exams; 
    }); 
}