0

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 の構造です (script タグなし)。

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

マウスをクリックしてノードを選択できるようにする必要があります (実際には、マウス クリックで li タグの 1 つを選択します)。次に、削除ボタンを押して削除します（コードの最後の行）。どうやってやるの？

4

1 に答える 1

1

おそらくビュー モデルを変更する必要があると思います: observableArray にルートの親のリストを含む新しいモデルを作成します。次に、各要素のクリックをバインドし (要素をクリックして削除する)、関数を「delete me」のクリックにバインドできます。

次に例を示します。

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/任意の要素名をクリックしてから、[delete me] をクリックします。

于 2013-07-16T12:22:25.193 に答える