jquery - 更新 Ember 嵌套模型和模板

Question

我有一个由模型支持的模板。它是一个树形 ListView ，其中包含第一级文件夹。

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

我可以通过使用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 演示 Link

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>

Here is a working demo.