在Knockout.js，做你如何有絲打事件/按鈕在嵌套observableArray

Question

這裏刪除一個元素是代碼叉子是nemesv寫道：

http://jsfiddle.net/GbCYp/4/

還有一對父母節點和嵌套的子節點。

這裏是父/子節點的樣本：

function FormElementNode(children, text, value) { 
    var self = this; 
    self.children = ko.observableArray(children); 
    self.text = ko.observable(text); 
    self.value = ko.observable(value); 
} 

這裏是HTML的結構（沒有腳本標記）

<ul> 
    <li>Parent text value: 
     Children: 
     <ul> 
     <li>Child1 text value</li> 
     <li>Child2 text value</li> 
    </li> 

我需要能夠選擇通過鼠標點擊一個節點（實際上，通過點擊鼠標選擇一個li標籤）;然後按刪除按鈕將其刪除（代碼的最後一行）。我怎樣才能做到這一點？

Answer 1

我認爲你可能不得不改變你的視圖模型：創建一個新的模型，它包含一個observableArray中的根父列表。然後，你將能夠綁定每個元素的點擊（點擊要刪除的元素），並綁定一個函數來點擊「刪除我」。

下面是一個例子：

var Element = function(children, text, value) { 
    var self = this; 
    self.text = ko.observable(text); 
    self.value = ko.observable(value); 
    self.children = ko.observableArray([]); 

    if(children) { 
     for(var i = 0; i < children.length; i++) { 
      var child = children[i]; 
      self.children.push(new Element(child.children, child.text, child.value)); 
     } 
    } 
} 

var Model = function(data) { 
    var self = this; 
    this.els = ko.observableArray([]); 
    this.currentClicked = null; 
    for(var i = 0; i < data.length; i++) { 
     var element = data[i] 
     var el = new Element(element.children, element.text, element.value); 
     self.els.push(el); 
    } 
    this.click = function(el) { 
     self.currentClicked = el; 

    } 
    this.remove = function() { 
     self.els.remove(self.currentClicked); 
     for(var i = 0; i < self.els().length; i++) { 
      self.findAndRemove(self.els()[i], self.currentClicked); 
     } 
    } 

    this.findAndRemove = function(element, toFind) { 
     element.children.remove(toFind); 
     for(var i = 0; i < element.children().length; i++) { 
      self.findAndRemove(element.children()[i], toFind); 
     } 
    } 

} 

這個例子顯然不是最佳，但可以給你我的意思的想法。這裏是一個相應的jsfiddle：http://jsfiddle.net/JHK8b/1/你可以點擊任何元素名稱，然後點擊「刪除我」。