How to Navigate Back after a Parmeterized Query

Question

I have a main route /projects that gets a few records from the API: return this.store.findAll('project', {reload: true}); Also on that page is a search box that will hit the same API, but with query parameters: return this.store.find('project', params); and obviously, this changes the URL in the address bar to something like /projects?q=acme and also shows only the records that were returned from the query. The route and template don't change, I'm just trying to swap out the model data.

My route code:

 model: function(params) {
    if (params.q) {
      return this.store.find('project', params);
    } else {
      return this.store.findAll('project', {reload: true});
    }
  },
  queryParams: {
    q: {
     refreshModel: true
    }
  },

My problem is that when you navigate back from this query, it shows all the records from first hitting the page plus the searched for records, when what I want it to do really is just ask for the default data from the API again. I don't want to use incorrect terminology, but I think what I want is to reload the store, but having {reload: true} doesn't seem to make any difference.

How can I reload fresh from the store when clearing out the query parameters?

Update: I confirmed that refreshModel: true does issue another API call, but the problem is still that the store is keeping whatever it had previously, instead of using the response to reload the store from scratch. Hence, I had this in my code, but that then causes issues when going from a subroute of projects back to /projects.

var _this = this;
Ember.run(function() {
  _this.store.unloadAll('project');
});

Dory Zidon Dory Zidon · Accepted Answer · 2015-10-22T10:29:12

You can use the queryParams of the route, to make them reload when the query changes:

App.SomeRoute = Ember.Route.extend({
  queryParams: {
    q : {
      refreshModel: true
    }
  },
  model : function (params) {
    if (params.q) {
      return this.store.find('project', params);
    } else {
      return this.store.findAll('project', {reload: true});
    }
  }
});

Note that queryParam has various other options you can use, and various other tweaks if this simple solution doesn't work. Here is further reading: http://guides.emberjs.com/v1.10.0/routing/query-params/

How to Navigate Back after a Parmeterized Query

1 Answers