淘汰javascript foreach绑定

Question

我正在尝试允许用户创建一个转换并向此转换对象添加一个类别数组。我试图使用knockout的foreach绑定到类别数组，并让用户向转换添加新类别。我已经创建了一个jsfiddle来说明我在这里要解释的内容 http://jsfiddle.net/msell/ueNg7/16/

当用户修改一个转换时，JSON对象会正确构建，但我无法获得要显示的转换列表。

Answer 1

你有几个问题：

您正在使用Knockout 1.2.1

直到Knockout 2.0才添加foreach绑定。

您没有使用observableArray

您需要将categories属性修改为ko.observableArray()，而不仅仅是空数组。否则，当你push时，Knockout将无法观察到，remove方法将不存在。

您的this绑定错误。

从事件处理程序调用时，this将被错误地设置。您可以通过各种方式解决此问题discussed in length in the Knockout documentation，但一个简单的解决方法是将引用更改为viewModel而不是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('');
    }
};