TreeViewからノードを削除します

Question

私はknockoutJSを使用してツリービューを作成していますが、ツリーからいくつかのノードを削除するのにいくつか問題があります。私はなぜ、私の機能はノードを見つけるためにすべてのツリーをチェックしていない、最初のブランチだけを確認していません。ツリーからノードを削除する機能は次のとおりです。

var ViewModel = function(){ 
 
\t self = this; 
 
\t self.data = ko.mapping.fromJS(data.items); 
 
\t 
 
\t 
 
\t self.removerItem = function(item){ 
 
\t \t debugger; 
 
\t \t self.Remover(self.data,item); 
 
\t } 
 
\t 
 
    \t self.Remover = function(data,item){ 
 
\t \t debugger; 
 
\t \t 
 
\t \t for(i = 0; i < data().length; i++){ 
 
\t \t \t 
 
\t \t \t if(item.CategoryId == data()[i].CategoryId){ 
 
\t \t \t \t debugger; 
 
\t \t \t \t data.remove(item); 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t debugger; 
 
     if(data()[i].items() != null && data()[i].items() != undefined && data()[i].items().length > 0) 
 
     \t arguments.callee(data()[i].items,item); 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t \t 
 
\t \t } 
 
\t } \t 
 
    
 
} 
 

 
var data = { 
 
    items: [{ 
 
\t \t "CategoryId": 65, 
 
     "name": "MORPHED", 
 
     "items": [{ 
 
      "name": "5 Day", 
 
      "items": [{ 
 
       "CategoryId": 20, 
 
       "name": "30 day countdown" 
 
      }, { 
 
       "CategoryId": 19, 
 
       "name": "Staffing your program" 
 
      }, { 
 
       "CategoryId": 22, 
 
       "name": "Emergency/Medical Information" 
 
      }, { 
 
       "CategoryId": 18, 
 
       "name": "Promoting your program" 
 
      }, { 
 
       "CategoryId": 21, 
 
       "name": "Week of camp" 
 
      }] 
 
     }, { 
 
\t \t \t "CategoryId": 245, 
 
      "name": "47 Day", 
 
      "items": [] 
 
     }, { 
 
\t \t \t "CategoryId": 222, 
 
      "name": "1/27 Day", 
 
      "items": [] 
 
     }, { 
 
\t \t \t "CategoryId": 2222, 
 
      "name": "Age Targeted", 
 
      "items": [] 
 
     }] 
 
    }, { 
 
     "name": "CREATE", 
 
     "items": [{ 
 
\t \t \t "CategoryId": 2567, 
 
      "name": "15 Day", 
 
      "items": [] 
 
     }, { 
 
\t \t \t "CategoryId": 22245, 
 
      "name": "4 Day", 
 
      "items": [] 
 
     }, { 
 
\t \t \t "CategoryId": 2289787, 
 
      "name": "1/2 Day", 
 
      "items": [] 
 
     }] 
 
    }] 
 
}; 
 

 
var viewModel = new ViewModel(); 
 
ko.applyBindings(viewModel);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> 
 

 

 

 

 
<ul style="list-style-type:none" data-bind="template: { name: 'itemTmpl', foreach: data }"></ul> 
 

 
<script id="itemTmpl" type="text/html"> 
 
    <li> 
 
\t \t <div class="panel panel-default" style="margin: 0 0 0 0; padding: 0 0 0 0; border-radius:0"> 
 
\t \t \t <div class="panel-heading" style="background-color: white"> 
 
\t \t \t \t <a> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-plus"></span> \t \t \t \t \t </a> 
 
\t \t \t \t <a data-bind="text: name"></a> 
 
\t \t \t \t <a class="pull-right" data-bind="click: $root.removerItem"><span class="glyphicon glyphicon-remove"></span></a> 
 
\t \t \t </div> 
 
\t \t \t <div class="panel-body" style="margin: 0 0 0 0; padding: 0 0 0 0 " > 
 
\t \t \t \t <ul style="list-style-type:none" data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
    </li> 
 
</script>

とhere同じコードであるが、jsfiddleです。

Answer 1

あなたの投稿は、REPROを持っていることは良いことだが、これの中で、それは難しい理解することに行くものの多くは、まだあります：

• スタイリングと質問とは無関係のブートストラップのもののすべての種類は、
• 問題のために必要なデータより多くのデータ（アイテムとそのプロパティの両方）。
• コードを読みにくくするのに厄介なスペースがたくさんあります。
• ステートメントでリッティング。それは別に

、いくつかのコード・レビューっぽい発言：

• それは暗黙のグローバルですので、あなたがselfでvarを使用しないでください。
• IMHO arguments.calleeとそれ以外のものでは、indexOfとremoveの組み込みメソッドを使用しています。
• self.dataは実際にはアイテムのリストであり、itemsという名前はko.mappingを使用しています。
• プライベート機能を持つRemoverが公開されています。
• 小文字の動詞（ "remove"）は意味がありますが、大文字の（コンストラクタ関数が暗示されています）noun（ "リムーバー"）を使用しています。

上記のすべては、固定/変更してここで、働く何か：

var ViewModel = function(data) { 
 
    var self = this; 
 
    self.items = ko.mapping.fromJS(data.items); 
 

 
    self.removeItem = function(toDeleteItem) { 
 
    remove(toDeleteItem, self.items); 
 
    } 
 

 
    function remove(toDeleteItem, itemsObsArray) { 
 
    if (!itemsObsArray) { return false; } 
 
    
 
    if (itemsObsArray().indexOf(toDeleteItem) >= 0) { 
 
     itemsObsArray.remove(toDeleteItem); 
 
     return true; 
 
    } else { 
 
     var items = itemsObsArray(); 
 
     for (var i = 0; i < items.length; i++) { 
 
     if (!!remove(toDeleteItem, items[i].items)) { 
 
      return true; 
 
     } 
 
     } 
 
    } 
 
    
 
    return false; 
 
    } 
 
} 
 

 
var data = { 
 
    items: [ 
 
    { 
 
     "name": "MORPHED", 
 
     "items": [ 
 
     { 
 
      "name": "5 Day", 
 
      "items": [ 
 
      { "name": "30 day countdown" }, 
 
      { "name": "Staffing your program"} 
 
      ] 
 
     }, 
 
     { 
 
      "name": "47 Day", 
 
      "items": [] 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     "name": "CREATE", 
 
     "items": [ 
 
     { 
 
      "name": "15 Day", 
 
      "items": [] 
 
     }, { 
 
     "name": "4 Day", 
 
     "items": [] 
 
    }] 
 
    }] 
 
}; 
 

 
ko.applyBindings(new ViewModel(data));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> 
 

 
<ul data-bind="template: { name: 'itemTmpl', foreach: items }"></ul> 
 

 
<script id="itemTmpl" type="text/html"> 
 
    <li> 
 
    <div> 
 
     <div class="panel-heading"> 
 
     <span data-bind="text: name"></span> 
 
     <a href="#" data-bind="click: $root.removeItem">remove</a> 
 
     </div> 
 
     <div> 
 
     <ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</script>