I'm learning Ember.js, and am writing an application that I want to perform the following tasks ...
My application is just a single route. I'm using the Ember.Route
's model
hook to load data from local storage. Where is a good spot to check that 3rd party API for any new data, though? Should I also do this in the model
hook? I'd like to be able to display some sort of loading icon during the query to the 3rd party API and I'm not sure if that model
hook will allow me to do this?
Right now, my Route
only contains 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];
}
});
The data in local storage is namespaced using a region and name. It looks something like this ...
{
"NorthAmerica": {
"ryan": {
"summoner": { "region": "NorthAmerica", "name": "ryan" },
"history": [ ... ]
}
}
}
So, the Route
's model
method loads that data so that it can be used as the model. Where should I hit the 3rd party API to get new data, though? I'd like to check it for new data each time the page is refreshed. Thanks!
The model
hook is certainly the typical place that Ember expects you to place code like that. I wanted to create a lazy loading/infinite scroll mechanism and the best place to put the code to retrieve additional content was on the controller. For organization sake, I ended up moving the call to load my initial data into the controller as well. Using Ember.run.scheduleOnce
, I was able to ensure that the load happened after the render 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 that helps! :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With