如何使用 KnockoutJS 从 observableArray 中删除项目

Question

目标

\n\n

使用 KnockoutJS 从 observableArray 中删除一个项目。

\n\n

问题

\n\n

我不知道 \xe2\x80\x94 没有发生任何事情。

\n\n

我的标记：

\n\n

<button data-bind="click: Summary.remove">\n    <i class="icon-ok"></i>\n</button>\n

\n\n

我的删除操作：

\n\n

self.remove = function (item) {\n    self.products.remove(item);\n};\n

\n\n

我的可观察数组：

\n\n

self.products = ko.observableArray();\n

\n\n

怎么了？

\n\n

没有什么。这self.remove功能正在触发，但该项目没有任何反应。

\n\n

更多细节？

\n\n

我认为我传递的细节已经足够了，但如果您需要更多信息，请告诉我。

\n

Answer 1

假设您从 foreach 绑定内部调用，我相信您应该使用 $parent 上下文来调用删除函数：

<button data-bind="click: $parent.remove">
    <i class="icon-ok"></i>
</button>

这是一个示例小提琴，说明我通常如何构建从列表中添加/删除项目的结构：

http://jsfiddle.net/E53tc/

html

<ul data-bind="foreach: products"> 
    <li>
    <span data-bind="text: name"></span>
    <button data-bind="click: $parent.remove">Remove</button>
    </li>
</ul>
<button data-bind="click: add">Add New </button>

脚本

var product = function (data) {
    var self = this;

    self.name = ko.observable(data);
}

var vm = function () {
    var self = this;

    self.remove = function (item) {
        self.products.remove(item);
    };

    self.add = function () {
       self.products.push(new product("new product"));   
    }

    self.products = ko.observableArray();
}

var viewModel = new vm();
viewModel.products([ new product("product a"), new product("product b")]);
ko.applyBindings(viewModel);