Ember 路由終止挑戰(zhàn)和激活

在路由的轉(zhuǎn)換過程中，Ember路由器會通過回調(diào)（beforeModel、model、afterModel、redirect）解析一個transition對象到轉(zhuǎn)換的下一路由中。任何一個回調(diào)都可以通過傳遞過來的transition參數(shù)獲取transition對象，然后使用這個對象調(diào)用transition.abort()方法立即終止路由的轉(zhuǎn)換，如果你的程序保存了這個對象（transition對象）之后你還可以在需要的地方取出來并調(diào)用transition.retry()方法激活路由轉(zhuǎn)換這個動作，最終實現(xiàn)路由的轉(zhuǎn)換。

1，通過調(diào)用willTransition方法阻止路由轉(zhuǎn)換

當用戶通過{{link-to}}助手、transition方法或者直接執(zhí)行URL來轉(zhuǎn)換路由，當前路由會自動執(zhí)行willTransition方法。每個活動的路由都可以決定是否執(zhí)行轉(zhuǎn)換路由。

想象一下，在當前路由所渲染的頁面是一個比較復雜的表單，并且用戶已經(jīng)填寫了很多信息，但是用戶很可能無意中點擊了返回或者關閉頁面，這就導致了用戶填寫的信息直接丟失了，這樣的用戶體驗并不好。此時我們可以通過使用willTransition方法阻止用戶的行為并提示用戶是否確認離開本頁面。

為了驗證這個特性我們需要創(chuàng)建好測試所需的文件。

ember g controller form
ember g route form

首先在controller增加測試數(shù)據(jù)。

//  app/controllers/form.js


import Ember from 'ember';


export default Ember.Controller.extend({
    firstName: 'chen',
    lastName: 'ubuntuvim'
});

再創(chuàng)建一個模擬用戶填寫信息的模板。

  <div class="form-group">
    FirstName
    {{input type="text" class="form-control" id="exampleInputEmail1" placeholder="FirstName" value=firstName}}
  </div>
  <div class="form-group">
    LashName
    {{input type="text" class="form-control" id="exampleInputPassword1" placeholder="LashName" value=lastName}}
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>




<br><br>
{{#link-to 'about'}}<b>轉(zhuǎn)到about</b>{{/link-to}}

關鍵部分來了，我們在路由里添加willTransition方法。

//  app/routes/form.js


import Ember from 'ember';


export default Ember.Route.extend({
    actions: {
        willTransition: function(transition) {
            //  如果是使用this.get('key')獲取不了頁面輸入值，因為不是通過action提交表單的
            var v = this.controller.get('firstName');
            //  任意獲取一個作為判斷表單輸入值
            if (v && !confirm("你確定要離開這個頁面嗎？?")) {
                transition.abort();
            } else {
                return true;
            }
        }
    }
});

運行：http://localhost:4200/form，先點擊submit提交表單，可以看到表單順利提交沒有任何問題，然后再點擊轉(zhuǎn)到about，你可以看到會彈出如下提示框。

接著，點擊“取消”頁面沒有跳轉(zhuǎn)，如果是點擊“確定”頁面會跳轉(zhuǎn)到about頁面。 再接著，把FirstName這個輸入框的內(nèi)容清空然后點擊“轉(zhuǎn)到about”頁面直接跳轉(zhuǎn)到了about頁面。

很多博客網(wǎng)站都是有這個功能的??！

2，在beforeModel、model、afterModel回調(diào)中阻止路由轉(zhuǎn)換

beforeModel(transition) {
    if (new Date() > new Date('January 1, 1980')) {
      alert('Sorry, you need a time machine to enter this route.');
      transition.abort();
    }
}

這段代碼演示的就是在beforeModel回調(diào)中使用abort方法阻止路由的轉(zhuǎn)換。代碼比較簡單我就不做例子演示了！

3，存儲transition對象、路由轉(zhuǎn)換重試

對于使用abort方法終止的路由可以調(diào)用retry方法重新激活。一個很典型的例子就是登陸。如果登陸成功就轉(zhuǎn)到首頁，否則跳轉(zhuǎn)回登陸頁面。 文件準備工作：

ember g controller auth
ember g route auth
ember g controller login
ember g route login

下面是演示用到的代碼。

//  app/controllers/login.js


import Ember from 'ember';


export default Ember.Controller.extend({
    actions: {
        login: function() {
          //  獲取跳轉(zhuǎn)過來之前路由中設置的transition對象
            var transitionObj = this.get('transitionObj');
            console.log('transitionObj = ' + transitionObj);
            if (transitionObj) {
                this.set("transitionObj", null);
                transitionObj.retry();
            } else {
                //  轉(zhuǎn)回首頁
                this.transitionToRoute('index');
            }
        }
    }
});

//  app/controllers/auth.js


import Ember from 'ember';


export default Ember.Controller.extend({
    userIsLogin: false
});

//  app/routes/auth.js


import Ember from 'ember';


export default Ember.Route.extend({
    beforeModel(transition) {
        // 在名為auth的controller設置了userIsLogin為false，默認是未登錄
        if (!this.controllerFor("auth").get('userIsLogin')) {
            var loginController = this.controllerFor("login");
            // 保存transition對象
            loginController.set("transitionObj", transition);
            this.transitionTo("login");  // 跳轉(zhuǎn)到路由login
        }
    }
});

這個是登陸頁面

1. 先執(zhí)行http://localhost:4200/auth，然后界面會自動跳轉(zhuǎn)到login頁面，結(jié)果顯示如下：

可以看到URL確實是轉(zhuǎn)到login了。

1. 執(zhí)行http://localhost:4200/login，你會發(fā)現(xiàn)頁面直接跳轉(zhuǎn)到首頁，瀏覽器控制臺打印的transitionObj是undefined。由于沒有經(jīng)auth這個路由的跳轉(zhuǎn)所以獲取不到transition對象。自然就跳轉(zhuǎn)回index這個路由。

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