javascript - 与 knockout foreach 的数据绑定(bind)不起作用

Question

我是 knockout 新手，并尝试使用 observableArray 将数据绑定(bind)到 foreach 循环

下面是我的 JS 和 HTML 代码，有人可以看一下并帮助我解决我哪里出错了吗？我的主要问题是 foreach 未按预期工作

JS代码

define(function(require) {
    var app = require('durandal/app');
    var ko = require('knockout');
    var todoList = ko.observableArray([new Todo("test")]);
    return {
        todoName: ko.observable(),
        createTodo: function() {
            todoList.push(new Todo(this.todoName()));
            console.log(todoList().length);
        }
    };

    function Todo(name) {
        return {
            todoName: ko.observable(name)
        };
    }
});

我的 HTML 代码

<section>
    <h2>Create Todo</h2>
    <form class="form-inline">
        <fieldset>
            <label>Name</label>
            <input type="text" data-bind="value: todoName, valueUpdate: 'afterkeydown'" />
            <button type="submit" class="btn" data-bind="click: createTodo, enable: todoName">Click Me</button>
        </fieldset>
    </form>
</section>

<div class="row" data-bind="foreach: todoList">
    <div class="col-md-12">
        <label data-bind="text: todoName"></label>
    </div>
</div>

Answer 1

Knockout 正在您在 ko.applyBindings 中使用的对象内查找 todoList。不要创建变量，而是将其作为返回对象的属性。

这是一个工作片段:

function Todo(name) {
  return {
    todoName: ko.observable(name)
  };
}

function TodoViewModel() {
  return {
    todoList: ko.observableArray([new Todo("test")]),
    todoName: ko.observable(),
    createTodo: function() {
      this.todoList.push(new Todo(this.todoName()));
      console.log(this.todoList().length);
    }
  };
}

ko.applyBindings(TodoViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<section>
  <h2>Create Todo</h2>
  <form class="form-inline">
    <fieldset>
      <label>Name</label>
      <input type="text" data-bind="value: todoName, valueUpdate: 'afterkeydown'" />
      <button type="submit" class="btn" data-bind="click: createTodo, enable: todoName">Click Me</button>
    </fieldset>
  </form>
</section>

<div class="row" data-bind="foreach: todoList">
  <div class="col-md-12">
    <label data-bind="text: todoName"></label>
  </div>
</div>