javascript - 嵌套的 foreach 绑定(bind)无法正确显示

Question

我正在尝试在 observableArray 中显示 observableArray。

这是一个简单的待办事项列表，其中任务分配给某些人，我想在自己的 div 中显示每个人的任务。

我使用的是knockoutjs 3.3.0

为什么任务没有显示在人员下方？

这是我的 HTML:

    <div>
      <form data-bind="submit: addPerson">
        <p>New Person: <input data-bind='value: personToAdd, valueUpdate: "afterkeydown"' />
          <button type="submit" data-bind="enable: personToAdd().length > 0">Add</button>
        </p>
      </form>
      <form data-bind="submit: addTask">
        <p>New Task: <input data-bind='value: taskToAdd, valueUpdate: "afterkeydown"' />
          <select data-bind="options: people, optionsText: 'name', value:selectedPerson"></select>
          <button type="submit" data-bind="enable: taskToAdd().length > 0">Add</button>
        </p>
      <fieldset>
      <legend>Tasks</legend>
        <div data-bind="foreach: people">
          <div style="float: left; padding-right: 20px;">
            <label data-bind="text: name" />
            <div data-bind="foreach: tasks">
              <input type="checkbox" data-bind="checked: done" />
              <label data-bind="text: description, style: { textDecoration: done() ? 'line-through' : 'none' }" />
            </div>
          </div>
        </div>
      </fieldset>
      </form>
    </div>

这是我的 JavaScript:

    var ToDoList = function (people) {
    var self = this;

    self.taskToAdd = ko.observable("");
    self.personToAdd = ko.observable("");
    self.selectedPerson = ko.observable("");
    self.people = ko.observableArray(people);

    self.addTask = function () {
      if (self.taskToAdd() != "") {

        var person = ko.utils.arrayFirst(self.people(), function (item) {
          return item.name() === self.selectedPerson().name();
        });

        person.addTask(new Task(self.taskToAdd(), person.name()));

        self.taskToAdd("");
      }
    };

    self.addPerson = function () {
      if (self.personToAdd() != "") {
        self.people.push(new Person(self.personToAdd()));
        self.personToAdd("");
      }
    }.bind(self);
    };

    var Task = function (task, assignee) {
      var self = this;

      self.task = ko.observable(task);
      self.assignee = ko.observable(assignee)
      self.done = ko.observable(false);

      self.description = ko.pureComputed(function () {
      return self.task() + " (Assigned to: " + self.assignee() + ")";
      }, self);
    };

    var Person = function (name, tasks) {
      var self = this;

      self.name = ko.observable(name);
      self.tasks = ko.observableArray(tasks);

      self.addTask = function (task) {
      self.tasks.push(task);
      }.bind(self);
    };

    ko.applyBindings(new ToDoList());

Answer 1

任务没有出现的原因是您的<label>标签未正确关闭。而不是<label data-bind="blah"/> ，使用<label data-bind="blah"></label> .

任务容器当前根本没有渲染，因此不会被 knockout 分析。

更清楚地说，带有 data-bind="text: name"的标签未正确关闭并且具有文本绑定(bind)。文本绑定(bind)将整个任务容器替换为人员姓名。您的示例中有两个出现此错误的实例。