KnockoutJS：如何从子数组中删除项目？

Question

问题：

我还在学习knockoutJS，如果我的方法不对，请指导我。

这是我的小提琴：http://jsfiddle.net/amitava82/wMH8J/25/

点击编辑时，我收到了视图中表示的 json 模型，我想从模型中删除某些项目（子数组）或动作（父数组）（我删除了添加 UI 以从fiddle 为简单起见），然后最后将模型传回服务器。

现在，从根级别删除很容易。我坚持删除 ActionItems 数组中的 ActionParamaters 单个项目。

问题：

如何从子数组中删除项目？

Answer 1

您可以将点击的actionItem和包含的action数组传递给deleteActionItem函数，如下所示：

<!-- /ko -->
<a href="javascript:void(0)" data-bind="click: $root.deleteActionItem.bind($data, $parent)">remove item</a>

在您的模型中，您需要使用 ko.mapping 插件使每个 actionItem 数组可观察（参见编辑功能）

var viewModel = function() {
    var self = this;
    self.data = ko.observable();

    self.edit = function() {
       self.data ( ko.mapping.fromJS(editData) );
    }
    self.log = function() {
        console.log(self.data())
    }
    self.deleteAction = function(data) {
       //delete root node
       self.data().remove(data)
    }
    self.deleteActionItem = function(data,actionItem) {
        //delete items
        data.ActionItems.remove(actionItem);
    }
}

然后您将能够在 deleteActionItem 函数中从数组中删除项目，并且由于数组现在是可观察的，结果将反映到绑定的 dom 元素。

Answer 2

山姆，你的小提琴数据太复杂了。提问时，如果您提炼出相关元素，您将提高获得帮助的机会。我制作了一个 simple fiddle 来说明嵌套数组和删除。

这里是 HTML，注意 remove 函数在数组的上下文中，所以它调用 $parent 上的函数而不是 $root。这让我们可以直接针对上面的上下文，而不是根。

<ul data-bind="foreach: editData">
    <li>
        <span data-bind="text: name"></span>
        <button data-bind="click: $parent.removeParent">Remove Parent</button>
        ...
            <!-- This line is on the child context -->
            <button data-bind="click: $parent.removeChild">Remove Child</button>

</ul>​

这是父模型。注意这里的移除功能是为了移除孩子。当调用removeChild 函数时，它来自子上下文请求$parent，它将调用此删除。

var Parent = function(name, children) {
    var self = this;
    self.name = ko.observable(name);
    self.children = ko.observableArray(children);
    self.removeChild = function(child) {
        self.children.remove(child);
    };
};

您的小提琴也没有使用模型，这是 MVVM 开发的一个重要方面。您应该考虑通过the tutorials on the knockout site 来更好地了解如何构建淘汰赛应用程序。它将帮助您更轻松地处理此类问题。