Geek Answers Handbook

When and where can I load data from a remote API into an Ember.js application?

I am studying Ember.js and writing an application that I want to perform the following tasks ...

  • Download some data from local storage.
  • check third-party API for new additional data
  • add more and save everything in local storage
  • display a table of this data

My application is just one route. I am using the Ember.Route model hook to load data from local storage. Where is a good place to check if there is a third-party API for any new data? Should I also do this in a model hook? I would like to be able to display some kind of loading icon during the request for a third-party API, and I'm not sure if this model hook will allow me to do this?

Right now, my Route contains only the following code ...

 App.HistoryRoute = Ember.Route.extend({ model: function (params) { // initialize model var model = { summoner: params, history: [] }; if (typeof(localStorage.history) == 'undefined') return model; // fetch the data from local storage var history = JSON.parse(localStorage.history); // check for existing data if (!history.hasOwnKey(params.region) || !history[params.region].hasOwnKey(params.name)) return model; // use the data from local storage return history[params.region][params.name]; } });

Data in local storage is named using the realm and name. It looks something like this ...

 { "NorthAmerica": { "ryan": { "summoner": { "region": "NorthAmerica", "name": "ryan" }, "history": [ ... ] } } }

Thus, the Route model method loads this data so that it can be used as a model. Where should I hit a third-party API to get new data? I would like to check it for new data every time the page is refreshed. Thanks!

+6
source share
2 answers

The model hook is, of course, the typical place Ember expects you to host such code. I wanted to create a lazy loading / infinite scroll mechanism, and the best place to download code for additional content was on the controller. To organize for my sake, I moved the call to load my initial data into the controller. Using Ember.run.scheduleOnce , I was able to verify that the download occurred after the rendering queue:

 init: function() { //make sure the nested views have rendered before fetching initial data Ember.run.scheduleOnce('afterRender', this, this.fetchInitialData); }, //fetch initial data based on pageSize fetchInitialData: function() { //enable loading animation this.set('isLoading', true); //get the first page of users var self = this; $.post("/user/search", {limit: 15}) .then(function(response) { self.set('isLoading', false); self.set('total', response.total); self.set('model', response.users); }); }

Hope this helps! :)

+4
source

The model key is indeed the place to do this. Ember will wait until the promise returned in the hook model is resolved until the transition is complete. If you want to display something while the page is loading, then HistoryLoadingRoute (or the corresponding history / loading template) will do this. http://emberjs.com/guides/routing/loading-and-error-substates/

To make sure that Ember is waiting for your API call to complete before exiting the load state, you need to return the promise to the model hook. You can use return $.ajax(... for this, or I prefer return ic_ajax.request(... from https://github.com/instructure/ic-ajax because it works better with Ember testing.

0
source

More articles:


All Articles