Обновление 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 ДемоСсылка на сайт