0

问题：

我还在学习knockoutJS，如果我的方法是错误的，请指导我。

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

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

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

问题：

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

4

2 回答 2

6

您可以将单击的 actionItem 和包含的操作数组传递给 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 元素。

于 2012-07-09T19:45:49.377 回答
1

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

这是 HTML，请注意 remove 函数在数组的上下文中，因此它调用一个函数 on$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 开发的一个重要方面。您应该考虑阅读淘汰网站上的教程，以更好地了解如何构建淘汰应用程序。它将帮助您更轻松地处理此类问题。

于 2012-07-09T19:28:31.240 回答