Question

我是新手，想要使用foreach将数据绑定到observableArray循环

下面是我的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

淘汰赛正在todoList中使用的对象内寻找ko.applyBindings。与其创建变量，不如使其成为返回对象的属性。

这是一个有效的代码段：

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>

带有剔除foreach的数据绑定不起作用

1 个答案: