How to load different type of data to the application template in ember.js and handle errors

Question

I am starting to learn Ember.js 1.12 and I need an advice how to load that type of data which is used on all pages (in application template). For example, here is my template:

// file app/templates/application.hbs
<h1>Hello, {{username}}</h1>
<div>{{products_cnt}} products in basket</div>
<div>You have {{msg_cnt}} unread messages</div>
<div>{{outlet}}</div>

{{outlet}} will be different on all pages, because it depends on routes. {{username}}, {{products_cnt}} and {{msg_cnt}} will not change, they will be on each pages. {{username}}, {{products_cnt}} and {{msg_cnt}} is different type of data, so I should send different requests to the server API to get this data. I want to load {{username}}, {{products_cnt}} and {{msg_cnt}} in application route because I show them in application template. I tried this:

//file app/routes/application.js
export default Ember.Route.extend({
    model: function() {
        return Ember.Object.create({
            me: this.store.find('user', 'me'),
            products: this.store.find('product', 'my'),
            msg: this.store.find('msg', 'my')            
        });
    }
});

Is it correct? It works, but I suspect that it is not a better solution. In this case I have problem with "loading" and "error" hooks, they don't work. So, for error handling I had to use catch() function. And I don't know how to replace the "loading" hook, I want to show loading spinner and hide it when all AJAX requests completed (I did not find in ember.js something like when() function in jQuery) :

//file app/routes/application.js
export default Ember.Route.extend({
    model: function() {
        return Ember.Object.create({
            me: this.store.find('user', 'me').catch(function() {
                // works, I catch an error
            }),
            products: this.store.find('product', 'my').catch(function() {
                // works, I catch an error
            }),
            msg: this.store.find('msg', 'my').catch(function() {
                // works, I catch an error
            })
        });
    },
    actions: {
        loading: function(transition, originRoute) {
            // doesn't work
        },
        error: function(transition, originRoute) {
            // doesn't work
        }
    }
});

Also, I tried to send one request to the server:

export default Ember.Route.extend({
    model: function() {
        return this.store.find('allData');
    },
    actions: {
        loading: function(transition, originRoute) {
            // it works!
        },
        error: function(transition, originRoute) {
            // it works!
        }
    }
});

In this case "loading" and "error" hooks work fine, but I have another one problem. If an error has occurred all is falling down. I see just white page. The "error" hook works but I can do nothing to show nice page to the user. I can't show another route because the error occurs in application model.

What is the best practice to load different type of data on each page. With catching errors and catching loading states?

Kit Sunde Kit Sunde · Accepted Answer · 2015-07-15T21:57:42

The reason why you can't see the loading hook firing is because Ember.Object.Create({}) is just a plain object. Loading relies on promises, use Ember.RSVP.hash instead.

export default Ember.Route.extend({
    model: function() {
        return Ember.RSVP.hash({
            me: this.store.find('user', 'me'),
            products: this.store.find('product', 'my'),
            msg: this.store.find('msg', 'my')            
        });
    }
});

As for showing a nice error page on an application level. Have you tried just creating a root error.hbs template?

How to load different type of data to the application template in ember.js and handle errors

1 Answers