Как заполнить список 2 и выбрать 1 список данных в нокаут?

Question

self.Subject = ko.observableArray([ 
        {"Math", "M01" }, 
        { "Chemistry","M02" }, 
        { "Physics", "M03" } 
       ]); 
self.Teacher = ko.observableArray([ 
        {"M01","Jack"}, 
        {"M01","Mike"}, 
        {"M02","Albert"}, 
        {"M02","Ching"}, 
        {"M03","Rick"} 
       ]); 

В первом списке (не выбран), у меня есть математика и физика, и когда я нажимаю на Math in List, он должен заполнить еще один список Джеком и Майком.

Answer 1

Для этого вам необходимо отслеживать выбранный объект в вашей модели просмотра. Затем вы можете создать вычисленных наблюдаемых (доступных учителей), чтобы отслеживать, какие учителя отображать. Смотрите ниже:

https://jsfiddle.net/dw1284/9n36qcdu/

HTML:

<div> 
    <select multiple data-bind="options: Subjects, 
           optionsText: 'Name', 
           value: SelectedSubject, 
           optionsCaption: 'Choose Subject:'"> 
    </select> 
</div> 
<div data-bind="visible: SelectedSubject"> 
    Available Teachers: 
    <ul data-bind="foreach: AvailableTeachers"> 
    <li data-bind="text: Name" /> 
    </ul> 
</div> 

JavaScript:

// Subject model 
function Subject(id, name) { 
    var self = this; 
    self.Id = ko.observable(id); 
    self.Name = ko.observable(name); 
} 

// Teacher model 
function Teacher(name, subjectId) { 
    var self = this; 
    self.Name = ko.observable(name); 
    self.SubjectId = ko.observable(subjectId); 
} 

// Main viewmodel 
function ViewModel() { 
    var self = this; 

    self.Subjects = ko.observableArray([ 
    new Subject('M01', 'Math'), 
    new Subject('M02', 'Chemistry'), 
    new Subject('M03', 'Physics') 
    ]); 

    self.Teachers = ko.observableArray([ 
    new Teacher('Jack', 'M01'), 
    new Teacher('Mike', 'M01'), 
    new Teacher('Albert', 'M02'), 
    new Teacher('Ching', 'M02'), 
    new Teacher('Rick', 'M03') 
    ]); 

    self.SelectedSubject = ko.observable(); 

    self.AvailableTeachers = ko.computed(function() { 
    var array = []; 
    if (self.SelectedSubject()) { 
     ko.utils.arrayForEach(self.Teachers(), function(teacher) { 
     if (teacher.SubjectId() === self.SelectedSubject().Id()) { 
      array.push(teacher); 
     } 
     }); 
    } 
    return array; 
    }); 
} 

ko.applyBindings(new ViewModel());