Question

问题：

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

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

在编辑时，我收到了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

山姆，你的小提琴数据太复杂了。在提问时，如果你将你的小提取物提炼到相关元素，你将提高获得帮助的机会。我已经制作了一个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来更好地理解如何构建淘汰应用程序。它将帮助您更轻松地处理这类问题。

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

问题：

问题：

2 个答案: