javascript - 淘汰 javascript foreach 绑定

Question

我试图允许用户创建一个演员表并向这个演员表对象添加一个类别数组。我试图使用淘汰赛的 foreach 绑定到类别数组，并让用户将新类别添加到铸件中。我创建了一个 jsfiddle 来说明我在这里要解释的内容。
http://jsfiddle.net/msell/ueNg7/16/

当用户修改演员表时，JSON 对象会正确构建，但我无法完全获得要显示的演员表列表。

Answer 1

你有几个问题：

您正在使用淘汰赛 1.2.1

foreach直到 Knockout 2.0 才添加绑定。

您没有使用observableArray

您需要将您的categories属性修改为 a ko.observableArray()，而不仅仅是一个空数组。否则 Knockout 将无法观察push到它，并且该remove方法将不存在。

你的this绑定是错误的。

从事件处理程序调用时，this将设置不正确。您可以通过多种方式解决此问题，在 Knockout 文档中进行了详细讨论，但一个简单的解决方法是将引用更改为 toviewModel而不是this。

---

要解决所有这些问题，您应该升级到 Knockout 2.0，并将您的视图模型声明更改为

var viewModel = {
    name: ko.observable(''),
    description: ko.observable(''),
    categories: ko.observableArray(),
    categoryToAdd: ko.observable(''),

    removeCategory: function(category) {
        viewModel.categories.remove(category);
    },

    addCategory: function() {
        viewModel.categories.push(new Category(viewModel.categoryToAdd()));
        viewModel.categoryToAdd('');
    }
};

这是一个更正的 JSFiddle：http: //jsfiddle.net/ueNg7/19/

Answer 2

您需要为您的数组使用 ko.observableArray 否则 Knockout 不会知道您何时更改数组并且不会更新，您也应该使用模板，请阅读此处http://knockoutjs.com/documentation/template-binding.html#note_2_using_the_foreach_option_with_a_named_template

var viewModel = {
    name: ko.observable(''),
    description: ko.observable(''),
    categories: ko.observableArray([]),
    categoryToAdd: ko.observable(''),
    removeCategory: function(category) {
        this.categories.remove(category);
    },

    addCategory: function() {

        this.categories.push(new Category(this.categoryToAdd()));
        this.categoryToAdd('');
    }
};