Ember.js render template before data loads

Question

currently i'm working with ember rc-1 and ember-data rev-11.

I would like to know if it is posible to render parent's route template before getting ajax success from child route.

I have a router:

-index
      -objects

template for index:

<!-- some html that i would like to display on page load event -->
{{outlet}}

template for objects:

{{#each item in controller }}
<!-- data from item -->
{{/each}}

Objects route model method:

model: function(){
    return App.Object.find({limit: 0}) //this request is really heavy for backend and takes a lot of time
}

So when i navigate to objects url i see a blank page until i get response from server with all objects.

Maybe i'm front but it worked perfectly well in ember pre2 or pre-3. Any ideas?

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-03-15T12:35:17

By default if you pass a query to model.find it will return a promise. And if your route's model hook returns a promise the ember router enters loading state and waits for promises to be resolved.

If instead you use App.Object.find(), ember returns a live-query with no promise. If it's the first time a find has been called for a model, store will it kick off an async query with no params to load initial dataset.

Any ideas?

Ideally would be great if you can get rid of {limit: 0} param. Otherwise, consider setting model from setupController hook:

App.PostRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('content', App.Object.find({limit: 0}));
  }
});

Ember.js render template before data loads

1 Answers