從另一個observableArray中的observableArray中刪除一個元素在淘汰賽

Question

在完成淘汰賽教程working with lists and collections之後，我決定進一步實施兩級嵌套淘汰賽。

我的視圖模型的結構是這樣的：

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

所以這就像在觀察到的陣列可觀測陣列。但我是一個簡單的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> 

問題是與REMOVE語句（full code is in the fiddle）。迄今爲止，我沒有刪除該元素。函數只給出我想刪除的元素的值，如first，這不足以唯一標識我需要刪除的是什麼（這是第一個數組還是第二個數組）。

那麼有沒有一種方法可以從observableArray內部的observableArray中正確刪除元素？

Answer 1

您可以通過additional arguments to the click handler像$parent這是parent context：

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

然後在你的remove您可以通過第二個參數訪問父集合並從它當前元素：

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

演示JSFiddle。