Question

我有一个嵌套模型，用于构建树视图。

在这里，我有两个动作处理程序，用于根据传递的＆＃34; id＆＃34;删除文件夹。 PARAM。

所以当我传递第一级文件夹＆＃34; id＆＃34;时，我可以使用filterBy（）从模型中删除元素。

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

在这里，我如何使用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 DEMO：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

Ember嵌套模型：从模型中查找和删除子元素

1 个答案: