Вложенный в Ember массив моделей с помощью {{each}} помощника повторно отображает весь список при добавлении в хранилище данных Ember
У меня есть маршрут, который загружает приборную панель
// routes/dashboard/index.js
...
model: function(params) {
return this.store.find('dashboard', params.dashboard_id);
}
...
Модель информационной панели содержит отношение hasMany к модели виджета.
// models/dashboard.js
...
DS.Model.extend({
widgets: hasMany('widget', {async: true})
...
Модель виджета содержит отношение принадлежность к модели приборной панели.
// models/widget.js
...
DS.Model.extend({
dashboard: belongsTo('dashboard', {async: true})
...
Шаблон dashboard.index отображает виджеты с помощью помощника {{each}}
// templates/dashboard/index.js
...
{{#each model.widgets as |widget|}}
{{widget config="widget"}}
{{/each}}
...
Пользователь может добавить виджет на свою панель инструментов
// routes/dashboard/index.js
...
actions: {
addWidget: function() {
this.store.createRecord('widget', {
dashboard: this.modelFor('dashboard.index')
...
});
}
}
Хотя это работает, когда создается новый виджет, ВСЕ виджеты перерисовываются.
Некоторые вещи, на которые следует обратить внимание: - Я не реализовал View или Controller. - Если я изменю реализацию, чтобы она возвращала только коллекцию виджетов, в результате чего ember-cli создает ArrayController, а не ObjectController, каждый цикл не выполняет повторную визуализацию (отлично). Однако на инструментальных панелях имеется более одного дочернего массива, который необходимо визуализировать, и поэтому я не могу использовать этот подход. - Несмотря на усилия по реализации контроллера объекта и созданию моих собственных контроллеров массива, я не могу получить такую же функциональность здесь.
Любые предложения о том, как я могу добавить виджеты без повторного рендеринга всех виджетов?