Ember.js實現ajax 載入中效果

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