更新Ember嵌套模型和模板 [英] Updating Ember Nested Model and Template

问题描述

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

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

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

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

在模板中：

 < script type =text / x-handlebars> 
< h2>欢迎使用Ember.js< / h2> 
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =index> 
< ul> 
 {{＃#each item in model}} 
< li> {{item.foldername}}< / li> 
 {{/ each}} 
< / ul> 
< button {{action'createFolder'}}>添加第一级文件夹< / button> 
< button {{action'createSubFolder'}}>添加子文件夹< / button> 
< / script> 
  

在我的app.js中：

  App = Ember.Application.create（）; 
 
 App.Router.map（function（）{
 //把你的路线放在这里; 
}）; 
 
 App.folder = Ember.Object.extend（）; 
 
 App.IndexRoute = Ember.Route.extend（{
 model：function（）{
 return [{'foldername'：'Folder 1'}，{'foldername' ：'文件夹2'}，{'foldername'：'文件夹3'}]; 
}，
动作：{
 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'}）; 
 //如何在以下模型中更新任何第一级文件夹
} 
} 
 
}）; 
  

JSBIN演示链接

解决方案

您需要使用partials递归呈递。

 < script type =text / x-handlebarsdata-template-name =index> 
< ul> 
 {{#each model}} 
 {{partialtree}} 
 {{/ each}} 
< / ul> 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =_ tree> 
< li> {{foldername}}< / li> 
< ul> 
 {{#each children}} 
 {{partialtree}} 
 {{/ each}} 
< / ul> 
< / script> 
  

这是一个工作演示。

I have a template which is backed by a model. It is a tree list view which has the first level folders.

I have an action handler which is used to update the sub-child any of the first level folder. From the action I need to update the model so that the sub-child is updated in the template.

I can add another first level folder by directly updating the model using pushObject.

How can I add/update the sub-child nodes of any parent level folders.

In template:

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

In my 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 Demo Link

解决方案

You need to render recursively using partials.

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

这篇关于更新Ember嵌套模型和模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！