Ember-Data, Query Params, Routes

Design
1

Hi there, I’ve got a nice app running using Ember-Data to fetch some stuff from an API endpoint. Data is displayed as a table. So far so good, everything works like a charm.

The API is paged and so I had to handle query parameters in controller and route to issue a parameterized fetch against the API. I ended with a mechanic that reloads the route when a query param is changing.

queryParamsDidChange: function (params) {
  Ember.run.once(this, this.refresh);
}

This works fairly good when you click on a ‘next page’ button, but it bugs me a little that the whole template/route reloads, even the ‘next page’ button.

Imagine a search query param, driven by an debounced input field… It would always lose the focus while reloading the route…

How do I avoid that? I want a more AJAX approach, where just the table part of the template gets reloaded when a query param changes.

Thanks in advance,

Martin

2

We do something similar on our dashboard. We let the user configure the date range they are viewing and then update based on that.

I’ve found that the best way to do this is to have your ‘next page’ button trigger an action on the route. Then, you can trigger a transitionTo('dashboard', model) from that action. The model parameter will be passed to DashboardRoute#serialize() where you can turn it into a string to display in the URL.

I don’t have a great way to solve to focus problem though. We pull in a lot of data on our dashboard so changing the date range hits the wire and causes a load screen to show for a second. So, our users understand that this isn’t an on-page transition. Maybe you could pass a source parameter to your ‘next page’ action that tells you what triggered the transition. Then, you could set the focus to that element in the setupController hook.

3

why not just listen to onscroll event, and fetch more data as needed. most api return meta data like next page, current page and prev page. Or something like that.

here an example:

model() {
    var paginationSettings  = this.get('paginationSettings');
   // set settings to 1
    paginationSettings.page = 1;
    // /topics/?page=1
    return this.get('topic').query('cart', paginationSettings).then((results) => {
      // store the results meta, to use next load in case user scrolled
      this.set('meta', results.meta);
      return results;
    }, (err) => {
      //err error
     console.log(err);
    });
  },