Ember not updating template when model (in a hasMany association) changes - ember.js

Question

How can I force Ember to update a template when a child record is added/removed to my model?
Customer model
Docket.Customer = DS.Model.extend({
name: DS.attr('string'),
initial: DS.attr('string'),
description: DS.attr('string'),
number: DS.attr('string'),
archived: DS.attr('boolean'),
projects: DS.hasMany('project',{ async: true })
});
Project model
Docket.Project = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
number: DS.attr('string'),
archived: DS.attr('boolean'),
customer: DS.belongsTo('customer', { async: true })
});
When a project is added/deleted, this template should be updated:
{{#each filteredProjects}}
<h2>Customer: {{customer.name}}</h2>
<ul class="entries">
{{#each projects}}
<li>
<div class="actions">
<button {{action "remove" id}} class="icon-close"></button>
</div>
<div class="link" {{action "edit" id}} data-uk-modal="{target:'#project-modal'}">
<span class="before">{{number}}</span>{{name}}
</div>
</li>
{{else}}
<li>No projects</li>
{{/each}}
</ul>
{{/each}}
Example actions (extract)
remove: function (id) {
this.get('store').find('project', id).then(function (data) {
data.deleteRecord();
data.save();
});
},
save: function() {
// create new record
var project = this.store.createRecord('project', _this.getProperties('name', 'number', 'description', 'archived'));
// set customer
project.set('customer', this.get('selectedCustomer'));
// validate and save if validation passes, otherwise show errors
project.save().then(function () {
_this.closeForm();
}, function (response) {
_this.set('errors', response.errors);
});
}
Update 2
I openend an issue here, but it hasn't been resolved until now.

Answer 1

Your problem is, because you are using map to group the data, the returned array isn't a DS.RecordArray instance, so when a item is added or removed, the content isn't updated.
I think the easy way to handle it, is to reload the data, when a item is added or removed. So extract the method that load the data and call it in the save and remove action. Here I created a loadData method:
route
Docket.OrganizationProjectsIndexRoute = Docket.AuthenticatedRoute.extend({
setupController: function() {
this.loadData();
},
loadData: function () {
var projectsController = this.controllerFor('organization.projects');
this.store.find('customer').then(function(customers) {
var promises = customers.map(function(customer) {
return Ember.RSVP.hash({
customer: customer,
projects: customer.get('projects').then(function(projects) {
return projects.filter(function(project) {
return !project.get('archived');
});
});
});
});
Ember.RSVP.all(promises).then(function(filteredProjects) {
projectsController.set('filteredProjects', filteredProjects);
});
});
},
actions: {
remove: function (project) {
var _this = this;
project.destroyRecord().then(function() {
_this.loadData();
});
},
save: function() {
// create new record
var project = this.store.createRecord('project', _this.getProperties('name', 'number', 'description', 'archived'));
// set customer
project.set('customer', this.get('selectedCustomer'));
// validate and save if validation passes, otherwise show errors
projects.save().then(function () {
_this.closeForm();
_this.loadData();
}, function (response) {
_this.set('errors', response.errors);
});
}
}
});
template
{{#each filteredProjects}}
<h2>Customer: {{customer.name}}</h2>
<ul class="entries">
{{#each projects}}
<li>
<div class="actions">
<button {{action "remove" this}} class="icon-close"></button>
</div>
<div class="link" {{action "edit" this}} data-uk-modal="{target:'#project-modal'}">
<span class="before">{{number}}</span>{{name}}
</div>
</li>
{{else}}
<li>No projects</li>
{{/each}}
</ul>
{{/each}}
Some tips:
You can use project.destroyRecord() instead of project.deleteRecord() project.save().
You can pass the project instance directlly to the action using {{action "remove" this}} instead of the id {{action "remove" id}} so no need to reload using:
this.get('store').find('project', id)...
I hope it helps