更新Ember嵌套模型和模板

Question

我有一个由模型支持的模板。它是一个具有第一级文件夹的树列表视图。

我有一个操作处理程序，用于更新子-子文件夹的任何一级文件夹。从操作中，我需要更新模型，以便在模板中更新子级。

通过使用pushObject直接更新模型，我可以添加另一个第一级文件夹。

如何添加/更新任何父级文件夹的子节点。

在模板中：

<script type="text/x-handlebars">
  <h2> Welcome to Ember.js</h2>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <ul>
      {{#each item in model}}
         <li>{{item.foldername}}</li>
      {{/each}}
    </ul>
    <button {{action 'createFolder'}}>Add First Level Folder</button>
    <button {{action 'createSubFolder'}}>Add Sub Folder</button>
</script>

在我的app.js：

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here ;
});

App.folder = Ember.Object.extend();

App.IndexRoute = Ember.Route.extend({
   model: function() {
      return [{'foldername': 'Folder 1'}, {'foldername': 'Folder 2'}, {'foldername': 'Folder 3'} ];
   },
   actions: {
       createFolder: function () {
          var obj = App.folder.create({'foldername': 'Folder 4'});
          this.modelFor('index').pushObject(obj);
       },
       createSubFolder: function () {
          var subObj = App.folder.create({'foldername': 'Sub Folder 1'});
          //How to update this in the model below of any first level folder.
       }
  }

});

JSBIN演示链接

Answer 1

您需要使用部分递归地呈现。

<script type="text/x-handlebars" data-template-name="index">
  <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>

这是一个工作演示。