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

KnockoutJS : How do I remove an item from a child array?

本文关键字：数组 删除项目 KnockoutJS      更新时间：2023-09-26

问题：

我还在学习淘汰赛JS，如果我的方法有误，请指导我。

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

在单击编辑时，我收到视图中表示的 json 模型，我想从模型中删除某些项目(子数组(或操作(父数组((为了简单起见，我删除了添加 UI 以从小提琴中添加更多操作(，然后最终将模型传递回服务器。

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

问题：

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

您可以将单击的操作项和包含的操作数组传递给删除操作项函数，如下所示： 

<!-- /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 元素中。

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

这是 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 开发的一个重要方面。您应该考虑浏览淘汰赛网站上的教程，以更好地了解如何构建挖空应用程序。它将帮助您更轻松地处理此类问题。

相关文章：