CODEWITHSUNDEEP
ember.jsember-data
blue
blue

Reputation: 125

Query parameters removal and refreshModel

So I have this application with a page which contains a list that can be filtered.

The data behind the list can be VERY big, so the filtering is done server-side by sending filter parameters, very similar to what is found in the JSONAPI reference (e.g. ?filter[name]=John&filter[date]=2016-09-12|2016-09-15).

In order to do that, I have set up my route as follows:

export default Ember.Route.extend(AuthenticatedRoute, {
  queryParams: {
    'filter[name]': {
      refreshModel: true
    },
    [...]
  },

  model(params) {
    return this.store.query('receipt', params);
  }
});

Which make the route copy its query parameter to the API call without any issues.

Now, of course, the user must be able to change the filters from his interface, right? So I made a little Bootstrap modal/form and hooked it up with an action in my controller, which builds a set of query parameters and reloads the route with them:

changeFilters() {
  var params = {};
  if (this.get('nameFilter')) {
    params['filter[name]'] = this.get('nameFilter');
  }
  [...]
  this.transitionToRoute({queryParams: params});
}

Doing this does actually work fine. When the filter[name] parameter is added or changed in the query, the route refreshes and updates the model. However, the problem comes when the user disables the filter: it seems that removing the query parameter doesn't refreshes the route even with refreshModel set to true.

So, I am pretty sure it is a bug, as it doesn't make any sense to me, but in the meantime I am quite new to Ember so I thought I would ask for help here before filing a bug report.

So is there something I am missing? Or is this by design/some kind of design limitation?

Thanks!

Upvotes: 1

Views: 1811

Answers (1)

Max Wallace
Max Wallace

Reputation: 3758

What if, instead of using transitionToRoute, you update the query params via bindings on your controller?

The code would look like:

export default Ember.Controller.extend({

  queryParams: {
    'filter[name]': {
      refreshModel: true
    },
  },

});

and

changeFilters() {
  var params = {};
  if (this.get('nameFilter')) {
    this.set('filter[name]', this.get('nameFilter'));
  }
  [...]
}

I'm not sure if this will work, but you could give it a shot.

Upvotes: 1

Related Questions