Per-Model Promise status on Ember.js loading template

Question

I have an Ember.js (2.3) SPA. In a parent route for a part of the application, I'm loading quite a bit of data (~3.5MB) over many different Model types:

App.ParentRoute = Ember.Route.extend
  model: ->
    Ember.RSVP.hash
      foos: @store.findAll "foo"
      bars: @store.findAll "bar"
      bazes: @store.findAll "baz"
      quxes: @store.findAll "qux"

What I'd like to do is augment my existing parent loading template (currently just a spinner .gif) with information on the status of each of these promises. So when the template first renders it shows each model type:

[ ] Loading Foos...
[ ] Loading Bars...
[ ] Loading Bazes...
[ ] Loading Quxes...

and then as each Promise in the RSVP.Hash resolves, it's shown as an indicator of progress:

[ ] Loading Foos...
[X] Loaded 16 Bars
[ ] Loading Bazes...
[X] Loaded 213 Quxes

I see documentation for a Route loading action but it's using a controller and the documentation seems to indicate that controllers being deprecated (I haven't used any controllers yet in the project).

How do I access Promise state from a model() within the loading template?

Answer 1

Unfortunately, there does not seem to be a way to achieve what you want via the loading substate. Using Ember.RSVP.Hash will wait for all of those promises to resolve before rendering all of the content at once. To achieve more control over how the individual promises render, I think what you're looking for is PromiseProxyMixin . Here is an example of PromixeProxyMixin in use: http://blog.ksol.fr/promise-aware-controllers-and-components/

But this Ember addon makes working with promises this way even easier: ember-deferred-content

You would need to restructure your model hook to break these async calls out of Ember.RSVP.Hash to call them each individually, so that they can resolve at different times, independently of one another, and that way you can track the state of each promise one by one.

For example, you could have a model hook that returns something like:

model() {
  return {
    foos: @store.findAll "foo",
    bars: @store.findAll "bar",
    bazes: @store.findAll "baz",
    quxes: @store.findAll "qux",
  }
}

Then, using ember-deferred-content :

{{#deferred-content model.foos as |foos|}}
  {{#foos.pending}}
    [ ] Loading Foos...
  {{/foos.pending}}
  {{#foos.fulfilled as |f|}}
    [x] Loaded {{f.length}} Foos
  {{/foos.fulfilled}}
{{/deferred-content}}

...and repeat for bar , baz , and qux .

UPDATE 4/2/16:

I recently learned about another great add-on, which could be used to similar effect: ember-promise-helpers . The author of that add-on, fivetanley, is also an Ember Data core team member.