When and where may I load data, from a remote API, in my Ember.js application? -

i'm learning ember.js, , writing application want perform following tasks ...

1. load data local storage
2. check 3rd party api new additional data
3. append additional , save entire thing local storage
4. display table of data

my application single route. i'm using ember.route's model hook load data local storage. spot check 3rd party api new data, though? should in model hook? i'd able display sort of loading icon during query 3rd party api , i'm not sure if model hook allow me this?

right now, route contains 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 data local storage         var history = json.parse(localstorage.history);          // check existing data         if (!history.hasownkey(params.region) || !history[params.region].hasownkey(params.name))             return model;          // use data local storage         return history[params.region][params.name];      }  }); 

the data in local storage namespaced using region , name. looks ...

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

so, route's model method loads data can used model. should hit 3rd party api new data, though? i'd check new data each time page refreshed. thanks!

the model hook typical place ember expects place code that. wanted create lazy loading/infinite scroll mechanism , best place put code retrieve additional content on controller. organization sake, ended moving call load initial data controller well. using ember.run.scheduleonce, able ensure load happened after render queue:

init: function() {   //make sure 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 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 helps! :)