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"} 
       ]); 

最初のリスト（選択しない）では、私は数学化学と物理学を持っています。リストの数学をクリックすると、別のリストにジャックとマイクが追加されます。

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());