如何填充 2 个列表并在 Knockout 中选择 1 个列表数据？答案

【问题标题】：How to populate 2 list and on selecting 1 list data in Knockout?如何填充 2 个列表并在 Knockout 中选择 1 个列表数据？
【发布时间】：2017-01-20 06:07:05
【问题描述】：

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

在第一个列表（未选择）中，我有数学化学和物理，当我点击列表中的数学时，它应该用 Jack 和 Mike 填充另一个列表。

【问题讨论】：

你似乎还没有尝试过任何东西。

标签： knockout.js knockout-mapping-plugin knockout-validation knockout-mvc

【解决方案1】：

为此，您需要在视图模型中跟踪所选主题。然后，您可以创建一个计算出的 observable（可用教师）来跟踪要显示的教师。见下文：

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

【讨论】：