Ember loading、error子路由

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

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

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

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

1，loading子狀態(tài)

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

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

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

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

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

//  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，首先會看到執(zhí)行的loading模板的內(nèi)容，然后才看到真正要顯示的數(shù)據(jù)。有一個(gè)加載過程，如下面2幅圖片所示。

2，loading事件

在beforeModel、model、afterModel回調(diào)沒有立即返回之前，會先執(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!!");
        }
    }
});

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

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

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

3，error子狀態(tài)

與loading子狀態(tài)類似，error子狀態(tài)會在beforeModel、model、afterModel回調(diào)執(zhí)行過程中出現(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)中手動添加一個(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沒有定義所以應(yīng)該會報(bào)錯(cuò)。那么此時(shí)頁面會顯示什么呢？？

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

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

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

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

不過相比于瀏覽器控制臺打印的錯(cuò)誤信息簡單很多！??！

4，error事件

error事件與第一點(diǎn)講的loading事件也是相似的。使用方式與loading一樣。個(gè)人覺得這個(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對象里的所有屬性和方法名
            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í)請求應(yīng)該會找不到這個(gè)地址error的響應(yīng)碼應(yīng)該是404。然后直接跳轉(zhuǎn)到form這個(gè)路由上。 運(yùn)行http://localhost:4200/posts之后，瀏覽器控制臺打印信息如下：

頁面也會跳轉(zhuǎn)到form。

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

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