Dashboard type views

Design
13

Hi Alex,

Thanks for your post.

TLDR; I would like to display all panels right away and have each display its own loading or error substate.

Following your solution, the dashboard index route displays its loading substate until ALL the promises resolve and then all panels in the dashboard display at once.

Since I wanted to give the user more immediate feedback, my approach is to render all the templates into their named outlets from the dashboard index route:

In my dashboard index route:

export default Em.Route.extend({

  renderTemplate: function() {
    this.render();

    this.render('dashboard/cars', {
      into: 'dashboard.index',
      outlet: 'cars',
      controller: 'dashboard.cars'
    });

    this.render('dashboard/boats', {
      into: 'dashboard.index',
      outlet: 'boats',
      controller: 'dashboard.boats'
    });
  }
});

The corresponding dashboard index template:

<h3>My Dashboard</h3>

<div class="panel">
  {{outlet "cars"}}
</div>

<div class="panel">
  {{outlet "boats"}}
</div>

And then make the calls from the respective controllers:

export default Ember.ArrayController.extend({
  content: function() {
    return this.store.find('car');
  }.property()
});

.....

export default Ember.ArrayController.extend({
  content: function() {
    return this.store.find('boat');
  }.property()
});

This does show the user all (empty) panels on the page right away and they each fill in as their promises resolve, which is nice.

However, it would be much nicer to display the loading or error substate inside each panel template. Am I correct in assuming that those substates are only available to routes? Is this approach not the prescribed way to compose independently backed panels?

Im relatively new, so I appreciate any feedback.

Thank you.

8 Likes