Ember.js 入门指南——路由切换的终止和回跳

2019独角兽企业重金招聘Python工程师标准>>>

    在路由的切换过程中，Ember路由器会通过回调（beforeModel、model、afterModel、redirect）解析一个transition对象到切换的下一路由中。任何一个回调都可以通过传递过来的transition参数获取transition对象，然后使用这个对象调用transition.abort()方法立即终止路由的切换，如果你的程序保存了这个对象（transition对象）之后你还可以在需要的地方取出来并调用transition.retry()方法激活路由切换这个动作，最终实现路由的切换。

      

1，通过调用willTransition方法阻止路由切换

       当用户通过{{link-to}}助手、transition方法或者直接执行URL来切换路由，当前路由会自动执行willTransition方法。每个活动的路由都可以决定是否执行切换路由。

       想象一下，在当前路由所渲染的页面是一个比较复杂的表单，并且用户已经填写了很多信息，但是用户很可能无意中点击了返回或者关闭页面，这就导致了用户填写的信息直接丢失了，这样的用户体验并不好。此时我们可以通过使用willTransition方法阻止用户的行为并提示用户是否确认离开本页面。

       为了验证这个特性我们需要创建好测试所需的文件。

       ember g controller form

       ember g route form

 

       首先在controller增加测试数据。

//  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页面。

再接着，把FirstName这个输入框的内容清空然后点击“转到about”页面直接跳转到了about页面。

       很多博客网站都是有这个功能的！！

      

2，在beforeModel、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();
    }
}

       这段代码演示的就是在beforeModel回调中使用abort方法阻止路由的切换。代码比较简单我就不做例子演示了！

3，路由会跳（retrying）

文件准备工作：

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({
      userIsLogin: false,
       actions: {
              // 获取跳转过来之前路由中设置的transition对象
                  var transitionObj = this.get('transitionObj');
                  if (transitionObj) {
                     this.set("transitionObj", null);
                     this.set('userIsLogin', true);  // 登录成功的标记
                     transitionObj.retry();  //  回到登录前的页面
                  } else {
                     //  转回首页
                     this.transitionToRoute('index');
                  }
       }
});

//  app/routes/auth.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       beforeModel(transition) {
		// 在名为auth的controller设置了userIsLogin为false，默认是未登录
		if (!this.controllerFor("login").get('userIsLogin')) {
			var loginController = this.controllerFor("login");
			// 保存transition对象
			loginController.set("transitionObj", transition);
			console.log('未授权转到登录页面...');
			this.transitionTo("login");  // 跳转到路由login
		} else {

		}
	}
});

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

<form {{action 'login' on='submit'}}>
  <div class="form-group">
    <label for="exampleInputEmail1">FirstName</label>
    {{input type="text" class="form-control" id="exampleInputEmail1" placeholder="FirstName" value=username}}
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">LashName</label>
    {{input type="text" class="form-control" id="exampleInputPassword1" placeholder="LashName" value=password}}
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

{{! app/templates/auth.hbs}}

授权页面，登录才能看，并且登录成功后调回到这里。。。

这4段代码模拟一个需要授权才能查看的页面，还没登录的用户会跳转到登录页面，登录成功之后会跳转会到登录前的查看的授权页面。

这种方式在很多的网站都使用到，是一个非常常见的功能。

转载于:https://my.oschina.net/ubuntuvim/blog/511599