Javascript 嵌套的foreach绑定未正确显示

我试图在

observableArray

中显示

observableArray

这是一个简单的待办事项列表，其中任务分配给特定人员，我希望在各自的div中显示每个人员的任务

我正在使用KnockoutJS3.3.0

为什么任务没有显示在person下面

这是我的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>

---

任务未出现的原因是您的

标记未正确关闭。使用

代替

tasks容器当前根本没有呈现，因此没有通过knockout进行解析

---

更清楚地说，带有data bind=“text:name”的标签没有正确关闭，并且具有文本绑定。文本绑定正在使用人员的名称替换整个tasks容器。您的示例中有两个此错误的实例。

简单地尝试一下。小提琴没有完全发挥作用，一旦我有时间，我会去的。干杯，谢谢。我不会抓到的。谢谢你解释为什么标签没有正确合上，这将帮助我以后更加小心。

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