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

Question

问题：

我仍在学习敲除JS，如果我的方法有误，请指导我。

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

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

现在，从根级别删除很容易。 我坚持删除单个项，即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

山姆，您的小提琴数据太复杂了。 提出问题时，如果将提琴提炼为相关要素，将会增加获得帮助的机会。 我已经编写了一个简单的小提琴 ，用于说明嵌套数组和删除。

这是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 ，它将调用此remove。

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开发的重要方面。 您应该考虑阅读淘汰网站上的教程，以更好地了解如何构建淘汰应用程序。 这将帮助您轻松解决此类问题。