Javascript KnockoutJS：如何从子数组中删除项？ 问题:

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

这是我的小提琴：

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

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

问题:

---

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

山姆，你的小提琴数据太复杂了。当你提问时，如果你将你的小提琴提炼成相关的元素，你将提高获得帮助的机会。我制作了一个演示嵌套数组和删除的示例

这是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>​

---

您的小提琴也没有使用模型，这是MVVM开发的一个重要方面。你应该考虑如何更好地理解如何构造敲除应用程序。它将帮助您更轻松地处理此类问题。

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

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

---

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

感谢Tyrsius的详细解释。我还在学习KO（先做教程）。我仍然在寻找一些好的资源，用复杂的数据和UI（不仅仅是简单的购物车）来演示KO。在您的示例中，使用arraymap将数据映射到模型中。对于像我这样的复杂数据，这有多困难？我使用映射插件映射所有属性，因为我的数据非常复杂。老实说，我发现映射插件比它的价值更麻烦

arrayMap

很简单，无论如何都需要为任何复杂的模型编写客户端模型，因为大多数都需要方法。我已经编写了足够复杂的模型，没有太多麻烦，但是它需要一种不同于您可能习惯的思维方式。KO教程将为这种开发做好准备，即使它们很简单。我强烈推荐他们。嗨，泰尔修斯。你能解决我的问题吗？谢谢我不知道bind方法。我一直想知道如何通过点击事件的函数调用传递param，这对我帮助很大！但是，我没有注意到.bind（$data，$parent）中的“bind”：（！非常感谢

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

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);
    }
}