EmberJS: Application loading route and template

Question

I've been trying to implement loading indication feature when my application bootstraps and begin to load data from server using ember-data. Created templates/loading.hbs template.

So far loading template is not being rendered while application starts, even tried to emulate network latency using {latency: 4000} option.

routes/application.js

export default Ember.Route.extend({
  model: function() {
    return this.store.find('items');
  }
});

templates/loading.hbs

<div class="loading-overlay">
    <div class="spinner"></div>
</div>

Library versions

ember-cli 0.0.39
ember 1.6.1
handlebars 1.3.0
ember-data 1.0.0-beta.8

Also thanks to Balint Erdi who has a great blog on frontend development with EmberJS http://balinterdi.com/2014/06/18/indicating-progress-loading-routes-in-ember-dot-js.html

Solution

Samples at http://emberjs.com/guides/routing/loading-and-error-substates/ really helped.

App.LoadingView = Ember.View.extend({
  templateName: 'global-loading',
  elementId: 'global-loading'
});

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    loading: function() {
      var view = this.container.lookup('view:loading').append();
      this.router.one('didTransition', view, 'destroy');
    }
  }
});

Can any one help me with this?

Answer 1

You would also need a LoadingRoute (Loading and error substates) or handle the loading action in the application route