从TreeView中删除节点

Question

我正在使用knockoutJS创建一个树视图，我有一些问题要从de tree中删除一些节点。我不知道为什么但我的功能不检查所有树以找到一个节点，只有第一个分支。这是我从de tree中删除节点的功能。

＆＃13;

＆＃13;

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

var data = {
    items: [{
		"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"
            }]
        }, {
			"CategoryId": 245,
            "name": "47 Day",
            "items": []
        }, {
			"CategoryId": 222,
            "name": "1/27 Day",
            "items": []
        }, {
			"CategoryId": 2222,
            "name": "Age Targeted",
            "items": []
        }]
    }, {
        "name": "CREATE",
        "items": [{
			"CategoryId": 2567,
            "name": "15 Day",
            "items": []
        }, {
			"CategoryId": 22245,
            "name": "4 Day",
            "items": []
        }, {
			"CategoryId": 2289787,
            "name": "1/2 Day",
            "items": []
        }]
    }]
};

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

和here是相同的代码，但在jsfiddle中。

Answer 1

你的帖子有一个很好的复制品，但仍然有很多事情让人难以理解，其中包括：

• 与问题无关的各种样式和引导程序;
• 比问题所需的更多数据（项目及其属性）;
• 许多尴尬的间距使代码难以阅读;
• 充满debugger陈述;

除此之外，还有一些代码审查备注：

• 您不能将var与self一起使用，因此它是一个隐含的全局;
• 恕我直言，您使用arguments.callee以及其他内容过度复杂化，只需使用内置的indexOf和remove方法;
• 您通过self.data实际上是一个项目列表来使事情复杂化，然后使用items命名相同的事物ko.mapping。
• 您正在展示Remover，它可以是私人功能;
• 您使用大写（因此隐含的构造函数）名词（＆＃34; Remover＆＃34;）而小写动词（＆＃34;删除＆＃34;）会更有意义。

这里有一些有用的东西，所有上述内容都已更改/修复：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;