在前面的Ember.js 入門指南之二十路由定義提過(guò)loading、error子路由，它們是Ember默認(rèn)創(chuàng)建的，并在beforeModel、model、afterModel這三個(gè)回調(diào)執(zhí)行完畢之前會(huì)先渲染當(dāng)前路由的loading和error模板。

Router.map(function() {
  this.route('posts', function() {
      this.route('post', { path: '/:post_id'});
  });
});

對(duì)于上述的路由設(shè)置Ember會(huì)生成如下的路由列表：

每個(gè)路由都會(huì)自動(dòng)生成一個(gè)loading、error路由，下面我將一一演示這兩個(gè)路由的作用。 圖片前面loading、error路由對(duì)應(yīng)的application路由。posts_loading和posts_error對(duì)應(yīng)的是posts路由。

1，loading子狀態(tài)

Ember建議數(shù)據(jù)放在beforeModel、model、afterModel回調(diào)中獲取并傳遞到模板顯示。但是只要是加載數(shù)據(jù)就需要時(shí)間，對(duì)于Ember應(yīng)用來(lái)說(shuō)，在model等回調(diào)中加載完數(shù)據(jù)才會(huì)渲染模板，如果加載數(shù)據(jù)比較慢那么用戶看到的頁(yè)面就是一個(gè)空白的頁(yè)面，用戶體驗(yàn)很差！

Ember提供的解決辦法是：在beforeModel、model、afterModel回調(diào)還沒(méi)返回前先進(jìn)入一個(gè)叫loading的子狀態(tài)，然后渲染一個(gè)叫routeName-loading的模板（如果是application路由則對(duì)應(yīng)的直接是loading、error不需要前綴）。

為了演示這效果在app/templates下創(chuàng)建一個(gè)posts-loading模板。如果程序正常，在渲染模板posts之前會(huì)先渲染這個(gè)模板。

<img src="assets/images/loading/loading.gif" />

然后修改路由posts.js，讓model回調(diào)執(zhí)行時(shí)間更長(zhǎng)一些。

//  app/routes/posts.js


import Ember from 'ember';


export default Ember.Route.extend({


    model: function() {
        //  模擬一個(gè)延時(shí)操作，
        for (var i = 0; i < 10000000;i++) {


        }
        return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
    }
});

執(zhí)行http://localhost:4200/posts，首先會(huì)看到執(zhí)行的loading模板的內(nèi)容，然后才看到真正要顯示的數(shù)據(jù)。有一個(gè)加載過(guò)程，如下面2幅圖片所示。

2，loading事件

在beforeModel、model、afterModel回調(diào)沒(méi)有立即返回之前，會(huì)先執(zhí)行一個(gè)名為loading的事件。

//  app/routes/posts.js


import Ember from 'ember';


export default Ember.Route.extend({


    model: function() {
        //  模擬一個(gè)延時(shí)操作，
        for (var i = 0; i < 10000000;i++) {


        }
        return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
    },
    actions: {
        loading: function(transition, originRoute) {
            alert("Sorry this is taking so long to load!!");
        }
    }
});

頁(yè)面刷新后會(huì)彈出一個(gè)提示框，先不點(diǎn)擊“確定”。打開(kāi)瀏覽器的“開(kāi)發(fā)者 -> 開(kāi)發(fā)者工具”，切換到Network標(biāo)簽下。找到“pulls”這個(gè)請(qǐng)求，點(diǎn)擊它。

從圖中可以看到此時(shí)model回調(diào)并沒(méi)有返回。此時(shí)響應(yīng)的內(nèi)容是空的，說(shuō)明loading事件實(shí)在model回調(diào)返回之前執(zhí)行了。

然后點(diǎn)擊彈出框的“確定”，此時(shí)可以看到Response有數(shù)據(jù)了。說(shuō)明model回調(diào)已經(jīng)執(zhí)行完畢。 注意：如果當(dāng)前的路由沒(méi)有顯示定義loading事件，這個(gè)時(shí)間會(huì)冒泡到父路由，如果父路由也沒(méi)有顯示定義loading事件，那么會(huì)繼續(xù)向上冒泡，一直到最頂端的路由application。

3，error子狀態(tài)

與loading子狀態(tài)類似，error子狀態(tài)會(huì)在beforeModel、model、afterModel回調(diào)執(zhí)行過(guò)程中出現(xiàn)錯(cuò)誤的時(shí)候觸發(fā)。

命名方式與loading子狀態(tài)也是類似的?，F(xiàn)在定義一個(gè)名為posts-error.hbs的模板。

<p style="color: red;">
posts回調(diào)解析出錯(cuò)。。。。
</p>

然后在model回調(diào)中手動(dòng)添加一個(gè)錯(cuò)誤代碼。

//  app/routes/posts.js


import Ember from 'ember';


export default Ember.Route.extend({


    model: function() {
        //  模擬一個(gè)延時(shí)操作，
        for (var i = 0; i < 10000000;i++) {


        }
        var e = parseInt(value);
        return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
    }
});

注意var e = parseInt(value);這句代碼，由于value沒(méi)有定義所以應(yīng)該會(huì)報(bào)錯(cuò)。那么此時(shí)頁(yè)面會(huì)顯示什么呢？？

如果你的演示程序沒(méi)有其他問(wèn)題那么你也會(huì)得到上圖的結(jié)果。但是如果沒(méi)有定義這個(gè)模板，那么界面上將是什么都不顯示。

如果你想在xxx-error.hbs模板上看到是什么錯(cuò)誤信息，你可以在模板上打印model的值。如下：

<p style="color: red;">
posts回調(diào)解析出錯(cuò)。。。。
<br>
{{model}}
</p>

此時(shí)頁(yè)面會(huì)顯示出你的代碼是什么錯(cuò)誤。

不過(guò)相比于瀏覽器控制臺(tái)打印的錯(cuò)誤信息簡(jiǎn)單很多?。?！

4，error事件

error事件與第一點(diǎn)講的loading事件也是相似的。使用方式與loading一樣。個(gè)人覺(jué)得這個(gè)事件非常有用，我們可以在這個(gè)事件中根據(jù)error狀態(tài)碼的不同執(zhí)行不同的邏輯，比如跳轉(zhuǎn)到不同的路由上。

//  app/routes/posts.js


import Ember from 'ember';


export default Ember.Route.extend({


    model: function() {
        return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls____');
    },

    
    actions: {
        error: function(error, transition) {
            console.log('error = ' + error.status);
            //  打印error對(duì)象里的所有屬性和方法名
            for(var name in error){         
               console.log(name); 
               // console.log('屬性值或者方法體==》' + error[name]);
            }    
            alert(names); 
            if (error && error.status === 400) {
                return this.transitionTo("about");
            } else if (error.status === 404) {
                return this.transitionTo("form");
            } else {
                console.log('else......');
            }
        }
    }
});

注意getJSON方法里的URL，我在URL后面隨機(jī)加了一些字符，目的是讓這個(gè)URL不存在。此時(shí)請(qǐng)求應(yīng)該會(huì)找不到這個(gè)地址error的響應(yīng)碼應(yīng)該是404。然后直接跳轉(zhuǎn)到form這個(gè)路由上。 運(yùn)行http://localhost:4200/posts之后，瀏覽器控制臺(tái)打印信息如下：

頁(yè)面也會(huì)跳轉(zhuǎn)到form。

到此路由加載數(shù)據(jù)過(guò)程中涉及的兩個(gè)狀態(tài)loading和error的內(nèi)容全部介紹完，這兩個(gè)狀態(tài)在優(yōu)化用戶體驗(yàn)方面是非常有用的，希望想學(xué)習(xí)Ember的同學(xué)好好掌握?。。?^=

博文完整代碼放在Github（博文經(jīng)過(guò)多次修改，博文上的代碼與github代碼可能又出入，不過(guò)影響不大?。?，如果你覺(jué)得博文對(duì)你有點(diǎn)用，請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力?。?/p>