Обновление Ember Nested Model and Template

У меня есть шаблон, который поддерживается моделью. Это древовидный список, в котором есть папки первого уровня.

У меня есть обработчик действий, который используется для обновления дочернего элемента любой папки первого уровня. Из действия мне нужно обновить модель, чтобы дочерний элемент обновлялся в шаблоне.

Я могу добавить еще одну папку первого уровня путем непосредственного обновления модели с помощью 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 ДемоСсылка на сайт

Ответы на вопрос(1)

Ваш ответ на вопрос