Filtered & paged API

Design
1

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 () {
      Ember.run.once(this, 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,

Martin

1 Like
2

Hi Martin,

If I understand correctly you are looking for something like https://www.emberaddons.com/ 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: GitHub - gcollazo/ember-cli-addon-search: This project is no longer maintained please visit Ember Observer 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: Should Components Load Data? - Ember Igniter) although I am pretty sure that is not the right approach in this case.

Will you let us know how it goes?

3

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 this.store.query('articles', params);
  }
});

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

I hope this could be useful

Alessandro

1 Like
4

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

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

5

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!

6

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

Regards, Martin

7

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

8

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

Martin

1 Like
9

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