javascript - Ember 嵌套模型 : Find and remove child element from model

Question

我有一个用于构建 TreeView 的嵌套模型。

在这里，我有两个操作处理程序，用于根据传递的“id”参数删除文件夹。

因此，当我传递第一级文件夹“id”时，我可以使用 filterBy() 从模型中删除元素。

但是当我传递第二/第三级文件夹“id”，并使用 filterBy 使用“id”过滤模型时，它返回一个空值。

在这里，如何使用 id 过滤子级别模型？

在模板中:

 <script type="text/x-handlebars" data-template-name="index">
     <button {{action deleteFolder_1 '1'}}>Delete Folder_1</button> 
     <br><br>

     <button {{action deleteFolder_11 '11'}}>Delete Folder_11</button>
     <ul>
       {{#each model}}
          {{partial "tree"}}
       {{/each}}
     </ul>
 </script>

 <script type="text/x-handlebars" data-template-name="_tree">
    <li>{{foldername}}</li>
     <ul>
      {{#each children}}
        {{partial "tree"}}
      {{/each}}
     </ul>
 </script>

在 app.js 中

App.IndexRoute = Ember.Route.extend({
   model: function() {
    return [
    {
    id: '1',
    foldername: 'Folder 1',
    children:[{
      id: '11',
      foldername: 'Sub Folder 11',
      children: [{
          id: '111',
          foldername: 'Sub Folder 111',
          children: []
        }]
     }]
   }, 
  {
   id: '2',
   foldername: 'Folder 2',
   children: []
  },
  {
   id: '3',
   foldername: 'Folder 3',
   children:[]
 }];
 },
 actions: { 

  deleteFolder_1: function (id) {
    var obj = this.controller.content.filterBy('id',id);
    this.controller.content.removeObjects(obj);
  },
  deleteFolder_11: function (id) {
     var obj =      this.controller.content.filterBy('id',id);
     this.controller.content.removeObjects(obj);
      // How can I delete the subfolder here? How can I find the sub id? Is there any way to find id recursively.
   }

 }

 });

JSBIN 演示:LINK

Answer 1

您将需要递归遍历树。这是一个将根据您传递的 ID 删除条目的函数。此函数将遍历整个树以找到匹配项。

deleteFolderById: function (id) {      
  function recursiveFilter(item, index, array) {
    item = Em.Object.create(item);
    if (item.id === id) {
      return null;
    } else {
      item.set('children', item.children.map(recursiveFilter).compact());
      return item;
    }
  }

  var filtered = this.get('controller.content').map(recursiveFilter).compact();      
  this.set('controller.content', filtered);
}

Here is the working demo .