Filtered & paged API


Hi there,

i’ve got a tiny app up & running. Using ember-data, ember-simple-auth with oauth2 and a the ember-django-adapter. One of my routes fetches some records from from the API & displays them in a table. On top of that table sits a wall containing a bunch of switches (debounced input fields, selects) to shrink the results from my query. Changing one of those switches adds some parameters to the URL & reloads the route, issuing a new (parametereized) query to the API & displays the result. Everything works great but it is pretty annoying that reloading the route always even reloads the wall so that I lose focus on my input field…

Reloading the route on parameter’s change is achieved with implementing

queryParamsDidChange: function () {, this.refresh);

in the route’s actions.

What would be the best approach to reload just the table? Must admit that I don’t get the concept of nested routes and I feel pretty much in jail of “convention over configuration” when it comes to the binding between models, controllers & routes… :frowning:

Thanks in advance for helping & sorry for being stupid,



Hi Martin,

If I understand correctly you are looking for something like which does pagination and filtering with query params whilst keeping the focus?

That is open source so you could take a look at the project: to see exactly how they achieve that.

I haven’t looked at it but in all likelihood a “query” component setting a qp and a table component simply reacting to that newly loaded data.

Alternatively you could try loading data by way of a service (like here: although I am pretty sure that is not the right approach in this case.

Will you let us know how it goes?


I suppose that you fetch data in the route so you can define your query params to refreshModel when the value change. I copy the expmple from the guide toc_opting-into-a-full-transition

export default Ember.Route.extend({
  queryParams: {
    category: {
      refreshModel: true
  model(params) {
    // This gets called upon entering 'articles' route
    // for the first time, and we opt into refiring it upon
    // query param changes by setting `refreshModel:true` above.

    // params has format of { category: "someValueOrJustNull" },
    // which we can just forward to the server.
    return'articles', params);

In this way you can delete queryParamsDidChange from your route and ember do the thing

I hope this could be useful



Alessandro, this sounds absolutely reasonable, how could I miss it???

Will give it a try in a hour, thank you! Martin


Guys, as far as I understand the result will be the same. I assumed Martin took that approach (queryParamsDidChange) because he has many query params, since with queryParams/refreshModel you do that declaratively for each property at a time.

Anyway, let us know if you could fix it!


Yep, Frank is right. Did not work. Seems that I need to step back from query params to parameterize my query.

Regards, Martin


Martin, were you able to get ideas from Ember Addons?


Hi Frank, nope - not yet. Decided to go snowboarding, trying to get all this crazy ember stuff out of my brain.



Hey Frank, just wanted to let you know that I did not solve the technical problem but I vaporized the UX problem! :slight_smile: Simply by zapping the route_loading substates… See me clapping against my forehead.

Regards, Martin