I have a route that loads a dashboard
// routes/dashboard/index.js
...
model: function(params) {
return this.store.find('dashboard', params.dashboard_id);
}
...
The dashboard model contains a hasMany relationship to the widget model
// models/dashboard.js
...
DS.Model.extend({
widgets: hasMany('widget', {async: true})
...
The widget model contains a belongsTo relationship to the dashboard model
// models/widget.js
...
DS.Model.extend({
dashboard: belongsTo('dashboard', {async: true})
...
The dashboard.index template renders the widgets using the {{each}} helper
// templates/dashboard/index.js
...
{{#each model.widgets as |widget|}}
{{widget config="widget"}}
{{/each}}
...
The user can add a widget to their dashboard
// routes/dashboard/index.js
...
actions: {
addWidget: function() {
this.store.createRecord('widget', {
dashboard: this.modelFor('dashboard.index')
...
});
}
}
Although this works, when the new widget is created, ALL widgets are re-rendered.
Some things of note: - I have not implemented a View or Controller. - If I change the implementation to return just a collection of widgets, causing ember-cli to create an ArrayController rather than an ObjectController, the each loop does not re-render (excellent). However, dashboards have more than one child array that needs to be rendered, and so I cannot take this approach. - Despite efforts to implement the object controller and create my own array controllers, I cannot get the same functionality here.
Any suggestions of how I can add widgets without all widgets re-rendering?
Aucun commentaire:
Enregistrer un commentaire