文档章节

Ember.js 入门指南——loading、error子状态

ubuntuvim
 ubuntuvim
发布于 2015/09/28 01:32
字数 1422
阅读 374
收藏 1

        在前面的《Ember.js 指南——路由定义》提过loadingerror子路由,它们是ember默认创建的,并在beforeModelmodelafterModel这三个回调执行完毕之前会先渲染当前路由的loadingerror模板。

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

对于上述的路由设置ember会生成如下的路由列表:

每个路由都会自动生成一个loadingerror路由,下面我将一一演示这两个路由的作用。

图片前面loadingerror路由对应的application路由。posts_loadingposts_error对应的是posts路由。

      

1loading子状态

       Ember建议数据放在beforeModelmodelafterModel回调中获取并传递到模板显示。但是只要是加载数据就需要时间,对于Ember应用来说,在model等回调中加载完数据才会渲染模板,如果加载数据比较慢那么用户看到的页面就是一个空白的页面,用户体验很差!

       Ember提供的解决办法是:在beforeModelmodelafterModel回调还没返回前先进入一个叫loading的子状态,然后渲染一个叫routeName-loading的模板(如果是application路由则对应的直接是loadingerror不需要前缀)。

       为了演示这效果在app/templates下创建一个posts-loading模板。如果程序正常,在渲染模板posts之前会先渲染这个模板。

<!-- app/templates/posts-loading.hbs -->
 
<img src="assets/images/loading/loading.gif" />

 

       然后修改路由posts.js,让model回调执行时间更长一些。

//  app/routes/posts.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
 
       model: function() {
              //  模拟一个延时操作,
              for (var i = 0; i < 10000000;i++) {
 
              }
              return Ember.$.getJSON('https://api.github.com/repos/emberjs/ember.js/pulls');
       }
});

       执行http://localhost:4200/posts,首先会看到执行的loading模板的内容,然后才看到真正要显示的数据。有一个加载过程,如下面2幅图片所示。

2loading事件

       beforeModelmodelafterModel回调没有立即返回之前,会先执行一个名为loading的事件。

//  app/routes/posts.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
 
       model: function() {
              //  模拟一个延时操作,
              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!!");
              }
       }
});

          页面刷新后会弹出一个提示框,先不点击确定。打开浏览器的开发者à开发者工具,切换到Network标签下。找到“pulls”这个请求,点击它。

从图中可以看到此时model回调并没有返回。此时响应的内容是空的,说明loading事件实在model回调返回之前执行了。

       然后点击弹出框的确定,此时可以看到Response有数据了。说明model回调已经执行完毕。

注意:如果当前的路由没有显示定义loading事件,这个时间会冒泡到父路由,如果父路由也没有显示定义loading事件,那么会继续向上冒泡,一直到最顶端的路由application

 

3error子状态

       loading子状态类似,error子状态会在beforeModelmodelafterModel回调执行过程中出现错误的时候触发。

       命名方式与loading子状态也是类似的。现在定义一个名为posts-error.hbs的模板。

<!--  app/templates/posts-error.hbs -->
 
<p style="color: red;">
posts回调解析出错。。。。
</p>

 

       然后在model回调中手动添加一个错误代码。

//  app/routes/posts.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
 
       model: function() {
              //  模拟一个延时操作,
              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没有定义所以应该会报错。那么此时页面会显示什么呢??

       如果你的演示程序没有其他问题那么你也会得到上图的结果。但是如果没有定义这个模板,那么界面上将是什么都不显示。

       如果你想在xxx-error.hbs模板上看到是什么错误信息,你可以在模板上打印model的值。如下:

<!--  app/templates/posts-error.hbs -->
 
<p style="color: red;">
posts回调解析出错。。。。
<br>
{{model}}
</p>

   此时页面会显示出你的代码是什么错误。

       不过相比于浏览器控制台打印的错误信息简单很多!!!

4error事件

       error事件与第一点讲的loading事件也是相似的。使用方式与loading一样。个人觉得这个事件非常有用,我们可以在这个事件中根据error状态码的不同执行不同的逻辑,比如跳转到不同的路由上。

//  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后面随机加了一些字符,目的是让这个URL不存在。此时请求应该会找不到这个地址error的响应码应该是404。然后直接跳转到form这个路由上。

       运行http://localhost:4200/posts之后,浏览器控制台打印信息如下:

页面也会跳转到form

 

       到此路由加载数据过程中涉及的两个状态loadingerror的内容全部介绍完,这两个状态在优化用户体验方面是非常有用的,希望想学习Ember的同学好好掌握!!!=^=

 


© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合...

ubuntuvim
2015/10/25
1K
2
Ember.js 入门指南--目录

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,...

ubuntuvim
2015/09/07
389
2
Ember.js 入门指南——路由定义

当你的应用启动的时候,路由器就会匹配当前的URL到你定义的路由上。然后按照定义的路由层次逐个加载数据、设置应用程序状态、渲染路由对应的模板。 1,基本路由 在app/router.js的map方法里定...

ubuntuvim
2015/09/24
3.6K
8
Ember.js 入门指南——指定与路由关联的模型

路由其中一个很重要的职责就是加载适合的model,初始化数据,然后在模板上显示数据。 1,普通model关联 // app/router.js // …… Router.map(function() { this.route('posts');}); export...

ubuntuvim
2015/09/25
435
0
Ember.js 入门指南——路由简介

从本文开始,将为大家介绍路由(route),如果你看过前面的《Ember.js 入门指南——{{link-to}} 助手》这篇文章应该初步了解了route。不过在这篇文章中只是简单介绍了路由是定义、路由层次,...

ubuntuvim
2015/09/22
476
0

没有更多内容

加载失败,请刷新页面

加载更多

Java集合类常见面试知识点总结

Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾。 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java核心技术 https://blog.csdn.net/column/details/21930...

Java技术江湖
27分钟前
5
0
怎么用for循环打出爱心

先上效果图: 这是用*组成的爱心,下面讲讲思路: 首先这个图形可以拆分成三部分:第一部分是上面三行的两个梯形,第二部分是中间三行的长方形,第三部分是最下面的倒三角形。 其实图形拆分好...

INEVITABLE
33分钟前
4
0
用HttpUrlConnection伪造成HttpClient

https://www.jianshu.com/p/27ad06cc39d2

shzwork
38分钟前
4
0
Golang net/http处理表单请求

代码示范: package mainimport ("fmt""html/template""net/http")const tpl = `<html><head><title>Hey</title></head><body><form method="POST" action="/">......

听夜深窗外风
45分钟前
5
0
博客迁移 开源中国博客不再更新 之后考虑关停

博客迁移 开源中国博客不再更新 之后考虑关停 我的博客地址:blog.mrpei.cc

MrPei
46分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部