Wez
Wez

Reputation: 61

Recompute arrangedContent

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

Answers (1)

Kuba Niechciał
Kuba Niechciał

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.

So, how can you refresh the model?

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

Related Questions