Reputation: 61
I'm trying to reload a model and recompute arrangedContent. The model appears to be reloading but arrangedContent is not being recomputed. Sorting data is fine, it's adding and removing data that's causing the issue.
reloadModelData: function () {
this.get('target.router').refresh();
}
My template looks like:
{{#each project in arrangedContent}}
<tr>
<td>{{project.name}}</td>
...
</tr>
{{/each}}
Edit:
routes/projects/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function () {
return this.store.findAll('project');
}
});
controllers/projects/index.js
import Ember from 'ember';
export default Ember.Controller.extend(Ember.SortableMixin, {
queryParams: ['sortProperties', 'sortAscending'],
sortProperties: ['name'],
actions: {
...
reloadModelData: function () {
this.get('target.router').refresh();
}
}
});
A button is what is triggering reloadModelData
<button {{action 'reloadModelData'}}>Reload</button>
Upvotes: 3
Views: 171
Reputation: 974
Your model
hook is not being executed in your action. Why? Becouse you are executing #refresh()
on targer.router
, which is not a current route, but the Router
.
There is a convention called data-down-action-up. It supports sending actions up, to the objects that are, let's say, parents for the data to change. Possible solution would be to let your reloadModelData
bubble up to the route and handle this action in the route
. Then, in that action you could fetch the data again and set them on the controller:
# controller code
reloadModelData: function() {
return true;
}
And in route:
# route code
reloadModelData: function() {
this.store.find('project').then((function(_this) {
return function(projects) {
_this.get('controller').set('model', projects);
};
})(this));
}
If the result from the find
will be different than it was, the model
related computed properties will for sure recompute.
Here is a working demo in JSBin that compares your and mine solution.
Upvotes: 1