Ember.js入門ガイド——ルート切り替えの防止と再試験

ルートの切り替えの過程で、Emberルータはフィードバック(before Model、model、afterModel、redirerect)によって、一つのtransitionオブジェクトを切り替えの次のルートに解析します.任意のフィードバックは、転送されたtransionパラメータを通じてtransionオブジェクトを取得し、このオブジェクトを使ってtrantionn.abort()メソッドを呼び出してすぐにルートの切り替えを終了します.もしあなたのプログラムがこのオブジェクトを保存したら、必要な場所で取り出せます.trantionn.retry()方法でルートの切り替えを有効にします.最終的にルートの切り替えが実現されます.
      
1、willTransitionを呼び出すことにより、ルーティングの切り替えを阻止する.
       ユーザーが｛link-to｝アシスタント、transion方法または直接URLを実行してルートを切り替えると、現在のルートは自動的にwillTransition方法を実行します.各アクティブなルーティングは、ルーティングの切り替えを実行するかどうかを決定することができる.
       想像してみると、現在のルートでレンダリングされているページは比較的複雑なフォームであり、ユーザーは既に多くの情報を記入していますが、ユーザーが意図的にページをクリックしたり閉じたりすることによって、ユーザーが記入した情報が直接に失われてしまうので、このような利用者体験はよくないです.この時、私たちはwillTransitionを使用してユーザーの行動を阻止し、ユーザに本ページから離れることを確認するように促すことができます.
       この特性を検証するためにテストに必要なファイルを作成する必要があります.
       ember g controller form
       ember g route form
 
       まずcontrolerでテストデータを増加します.

//  app/controllers/form.js
 
import Ember from 'ember';
 
export default Ember.Controller.extend({
       firstName: 'chen',
       lastName: 'ubuntuvim'
});

もう一つのアナログユーザ記入情報のテンプレートを作成します.

<form>
  <div>
    <label for="exampleInputEmail1">FirstName</label>
    {{input type="text" id="exampleInputEmail1" placeholder="FirstName" value=firstName}}
  </div>
  <div>
    <label for="exampleInputPassword1">LashName</label>
    {{input type="text" id="exampleInputPassword1" placeholder="LashName" value=lastName}}
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
 
<br><br>
{{#link-to 'about'}}<b>  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」をクリックしてフォームを提出してください.フォームの提出に問題がないことが分かります.そして「aboutに移動」をクリックして、次のようなメッセージボックスが表示されます.
続いて「キャンセル」をクリックしてもジャンプしません.「確定」をクリックするとaboutページにジャンプします.
次に、First Nameという入力枠の内容をクリアしてからaboutページに移動します.
       多くのブログサイトがこの機能を持っています.
      
2,before Model、model、afterModelコールでルートの切り替えを阻止します.

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

       このコードはbefore Modelフィードバックでaboort方法を使ってルートの切り替えを阻止することを実証しました.コードは比較的簡単です.例を見ないでデモンストレーションします.
3、トラスティンオブジェクト、ルート切り替えのリトライを記憶する
       abort法を使用して終了したルーティングは、retry方法を呼び出して再活性化することができる.典型的な例はログインです.ログインが成功すれば、最初のページに進みます.そうでなければ、ログインページに戻ります.
ファイル準備:
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() {
          //                transition  
                     var transitionObj = this.get('transitionObj');
                     console.log('transitionObj = ' + transitionObj);
                     if (transitionObj) {
                            this.set("transitionObj", null);
                            transitionObj.retry();
                     } else {
                            //      
                            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");  //      login
              }
       }
});

<!--  //app/templates/login.hbs -->
 
       

1,先に実行しますhttp://localhost:4200/authを選択します.すると、画面は自動的にloginページに遷移し、次のような結果が表示されます.
URLは確かにloginになりました.
 
2,実行http://localhost:4200/loginページが最初のページに直接ジャンプしていることが分かります.ブラウザコンソールが印刷するtrantionObjはundefinedです.authというルートを経由したジャンプがないので、transionオブジェクトを取得できません.自然にindexというルートに戻ります.