javascript - 在子对象中显示过滤列表的 Knockout js。访问父对象列表进行过滤

Question

我目前有一个学校对象的学生列表和类(class)列表。我希望每个类(class)对象都能够根据类(class) ID 属性显示过滤后的学生列表。

我尝试通过自定义绑定(bind)访问父对象，但没有成功。

也许我看问题的方式不对？我在这上面花了几天时间，无论我用哪种方式解决它，我总是需要访问父对象的值。

是否有任何方法可以访问我需要的内容？我开始认为不可能访问全局样式变量。

function School()
{
  var self = this;
  self.ClassVMs = ko.observableArray([]).indexed('Number');
  self.ChildVMs = ko.observableArray([]).indexed('Number');
}

function ClassVM(classId, text)
{
  var self = this;
  self.Number = ko.observable();
  self.Text =  ko.observable(text);
  self.ClassId = ko.observable(classId);
}

function ChildVM(classId, text)
{
  var self = this;
  self.Number = ko.observable();
  self.ClassId = ko.observable(classId);
  self.Text = ko.observable(text);
}

我有一个 Fiddle用我的设置。任何和所有指导表示赞赏。谢谢

Answer 1

您不需要需要全局变量来解决这个问题。 Knockout 有 $root 和 $parent 稍微超出您在 foreach 中的范围。此外，如果确实需要，您始终可以确保 View 模型获得另一种类型的 View 模型作为其依赖项。事实上，如果一个 View 模型有一个 subview 模型列表，它就已经有了这样的依赖。

您需要考虑的是您的 UI/UX 将会是什么样子。您是否正在设计 View 模型以支持用户正在“查看”学生并为他/她注册类(class)的 View ？还是应用用户正在查看类(class)并逐一添加学生？

这里有一个变体，显示了两者的一点点:

function School(classes) {
  var self = this;
  self.classes = ko.observableArray(classes);
  self.students = ko.observableArray([]);
  self.enroll = function(child, someClass) {
    if (self.students().indexOf(child) < 0) {
      self.students.push(child);
    }
    if (someClass.students().indexOf(child) < 0) {
      someClass.students.push(child);
    }
  };
  self.enrollNewChild = function(someClass) {
    if (!!someClass.childToBeEnrolled()) {
      self.enroll(someClass.childToBeEnrolled(), someClass);
      someClass.childToBeEnrolled(null);
    }
  };
  self.enrollInClass = function(child) {
    if (!!child.classToBeEnrolledIn()) {
      self.enroll(child, child.classToBeEnrolledIn());
      child.classToBeEnrolledIn(null);
    }
  };
}

function Class(id, txt) {
  var self = this;
  self.id = ko.observable(id);
  self.txt = ko.observable(txt);
  self.students = ko.observableArray([]);
  self.studentsCsv = ko.computed(function() {
    return self.students().map(function(s) { return s.txt(); }).join(", ");
  });
  self.childToBeEnrolled = ko.observable(null);
}

function Child(id, txt) {
  var self = this;
  self.id = ko.observable(id);
  self.txt = ko.observable(txt);
  self.classToBeEnrolledIn = ko.observable(null);
}

var english = new Class(1, "English 1");
var math1 = new Class(2, "Mathematics 1");
var math2 = new Class(2, "Mathematics 2");

var john = new Child(1, "John Doe");
var mary = new Child(1, "Mary Roe");
var rick = new Child(1, "Rick Roll");
var marc = new Child(1, "Marcus Aurelius");

var school = new School([english, math1, math2]);

ko.applyBindings(school);

// Method 1:
school.enroll(john, english);
school.enroll(john, math2);
school.enroll(marc, english);
school.enroll(mary, math2);
school.enroll(mary, english);
school.enroll(rick, english);
school.enroll(rick, math1);

td { background-color: #eee; padding: 2px 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<h3>Classes:</h3>
<table>
  <tbody data-bind="foreach: classes">
    <tr>
      <td><span data-bind="text: txt"></span></td>
      <td><span data-bind="text: studentsCsv"></span></td>      
      <td>
        Add student
        <select data-bind="options: $root.students, value: childToBeEnrolled, optionsText: 'txt', optionsCaption: 'Choose...'"></select>
        <button data-bind="click: $root.enrollNewChild">enroll now</button>
      </td>
    </tr>
  </tbody>
</table>

<h3>School Students</h3>
<table>
  <tbody data-bind="foreach: students">
    <tr>
      <td><span data-bind="text: txt"></span></td>
      <td>
        Enroll in:
        <select data-bind="options: $root.classes, optionsText: 'txt', value: classToBeEnrolledIn, optionsCaption: 'Choose...'"></select>
        <button data-bind="click: $root.enrollInClass">enroll now</button>
      </td>
    </tr>
  </tbody>
</table>

它不会直接回答您的问题(“根据类(class) id 属性显示经过过滤的学生列表”)，因为我认为这是一个 XY 问题，并且你最好尝试找到像上面这样的解决方案，在那里你有适当的引用，而不是必须使用 id 和某种查找机制。