使用敲除foreach的数据绑定不起作用

Question

我是敲除并尝试使用observableArray将数据绑定到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>