Ember.js implementation of Ajax loading effect

In Ember.js, it takes a lot of processing of Ajax requests, and because it's a single page application, Ajax is loading more visually--otherwise the user will simply think he clicked and didn't respond. For example, I have such a page:

The code is as follows	Copy Code
App.Router.map (function () { This.resource (' User ', function () { This.route (' info '); }; };

From the/user/index route (click link) to the/user/info,info page needs to handle a large number of AJAX requests, request by the Userinforoute model Hook issued, before the Ajax return, User/info template will not render, visually speaking, It's like clicking a link but not responding – but in fact Ajax is loading.

In order to give the user visual feedback, Ember.js provides the Loading1 event hook:

The code is as follows	Copy Code
App.userinforoute = Ember.Route.extend ({ Model:function () { Some promise here Return $.get (' http://www.111cn.net/blog/'); }, Actions: { Loading:function (Transition, Originroute) { Here, I can provide an indication of how Ajax is loading } } });

Personally, I don't really like the way it's handled, because each route you want to enter requires visual feedback to define a loading event hook.

Ember.js also provides a method for the default loading. For example, the routing definition above, in fact, allows the following loading routes by default:

1.user.loading
2.loading

I just need to define a unified user/loading Template:

The code is as follows	Copy Code
<script type= ' text/x-handlebars ' data-template-name= ' user/loading ' > Define the effect style in Ajax loading here </script>

Then from/user/index to/user/info, if the latter needs to process a large amount of AJAX data and fail to return immediately, Ember.js will help us temporarily switch to/user/loading-here is the visual feedback we have defined. When the AJAX request data returns, we automatically enter the/user/info