Ember.js實現ajax 載入中效果

來源:互聯網
上載者:User

Ember.js 裡,需要大量處理 ajax 請求,又因為是單頁面應用,ajax 正在載入就更需要視覺上的反饋 – 否則使用者會簡單地認為他點擊了卻沒有反應。譬如我有這樣一個頁面:

 代碼如下 複製代碼

App.Router.map(function() {
  this.resource('user', function() {
    this.route('info');
  };
};

從 /user/index 路由(點選連結)到 /user/info,info 頁面需要處理大量 ajax 請求,請求由 UserInfoRoute 的 model 勾子發出,在 ajax 返回前,user/info 模板不會渲染,從視覺上說,就好像點擊了連結卻沒有反應 – 但其實 ajax 正在載入中。

為了給使用者視覺反饋,Ember.js 提供了 loading1 事件勾子:

 代碼如下 複製代碼

App.UserInfoRoute = Ember.Route.extend({
  model: function() {
    //some promise here
    //return $.get('http://www.111cn.net/ blog/');
  },
  actions: {
    loading: function(transition, originRoute) {
      // 在這裡,我可以提供一種 ajax 正在載入中的指示
    }
  }
});

就我個人來說,我不十分喜歡上面的處理方法,因為每個你要進入的路由,需要視覺反饋的話,都要定義一個 loading 事件勾子。

Ember.js 還提供一個方法,預設的 loading。譬如上面的路由定義裡,其實預設允許以下 loading 路由:

1.user.loading
2.loading

我只需要定義一個統一的 user/loading 模板:

 代碼如下 複製代碼

<script type='text/x-handlebars' data-template-name='user/loading'>
// 把 ajax 載入中的效果樣式定義在這裡
</script>

之後從 /user/index 路由到 /user/info 裡,如果後者需要處理大量 ajax 資料而未能馬上返回,Ember.js 會幫我們暫時切換到 /user/loading 中 – 這裡就是我們定義的視覺反饋。ajax 請求資料返回後,我們就自動進入 /user/info

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.