Dashboard type views

Design
15

@migbar @rytis I met the similar problem. And in this case I don’t think route loading/error substate can solve it. In current Ember design, multiple route can not be used at the same time in the same level, and URL also can not express this kind of status.

So my solution is simllar as yours (using controllers), but with some differences:

  1. Use dashboard route to load data, but in order to show UI as quickly as possible, I use setupController instead of model hook.
  2. Use PromiseProxyMixin with ArrayController to give controller isFulfilled, isRejected, isPending status. It will be convenient to display loading/error status or real data in template.

The dashboard route and controllers:

// routes/dashboard.js
export default Ember.Route.extend({
  setupController: function() {
    this.controllerFor('dashboard.cars').set('promise', this.store.find('car'))
    this.controllerFor('dashboard.boat').set('promise', this.store.find('boat'))
  }
});

// controllers/dashboard/cars.js
export default Ember.ArrayController.extend(Ember.PromiseProxyMixin, {
});

// controllers/dashboard/boat.js
export default Ember.ArrayController.extend(Ember.PromiseProxyMixin, {
});

The dashboard templates:

<h3>My Dashboard</h3>

<div class="panel">
  {{render 'dashboard/cars'}}
</div>
<div class="panel">
  {{render 'dashboard/boats'}}
</div>

And dashboard/cars template:

{{#if isFulfilled}}
  {{#each}}
    Display a single car
  {{/each}}
{{/if}}

{{#if isPending}}
  Loading...
{{/if}}

{{#if isRejected}}
  Display error
{{/if}}

You can also wrap the promise logic in template to a component like this:

{{#promise-content content=controller}}
  Display controller content
{{/promise-content}}

And in component:

{{#if content.isFulfilled}}
  {{yield}}
{{/if}}

{{#if isPending}}
  Loading...
{{/if}}

{{#if isRejected}}
  Display error
{{/if}}

I expect there is a better solution. Because sometimes I use route’s loading/error substate and the other time I use PromiseProxyMixin. I expect anyone can work out a unified solution for loading data.

11 Likes