从knockout中的另一个observableArray中的observableArray中删除一个元素

Question

在完成了使用列表和集合的淘汰教程之后,我决定进一步使用knockout实现两级嵌套.

我的ViewModel的结构如下所示:

function ViewModel() {
    this.elements = ko.observableArray([{
        id: 1,
        txt: 'first',
        el: ko.observableArray(['first', 'second'])
    },{
        id: 2,
        txt: 'second',
        el: ko.observableArray(['first', 'third'])
    },{
        id: 3,
        txt: 'third',
        el: ko.observableArray(['fourth', 'fifth'])
    }]);

    this.remove = function(el){
        console.log(el);
    }
}

所以这就像可观察数组中的Observable数组.我正在输出一个简单的2 foreach视图绑定:

<div data-bind="foreach: elements">
    <span data-bind="text: txt"></span>
    <ul data-bind="foreach: el">
        <li data-bind="text: $data, click: $root.remove">
    </ul>
</div>

问题在于删除语句(完整代码在小提琴中).到目前为止,我没有删除元素.函数只给出了我想要删除的元素的值,first这不足以唯一地标识我需要删除的内容(这是第一个数组中的第一个数据还是第二个数组).

那么有没有办法从observableArray中的observableArray中正确删除元素？

Answer 1

你可以通过其他参数的click处理程序,如$parent这是父上下文:

<li data-bind="text: $data, click: function() { $root.remove($data, $parent) }"/>

然后,您remove可以通过第二个参数访问父集合,并从中删除当前元素:

this.remove = function(data, parent){
    parent.el.remove(data);
}

演示JSFiddle.