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>。

任务容器当前没有渲染，因此不会被挖空解析。

更清楚的是，带有data-bind =“text：name”的标签未正确关闭并且具有文本绑定。文本绑定正在用人员名称替换整个任务容器。您的样本中有两个此错误的实例。

嵌套的foreach绑定无法正确显示

1 个答案: