EmberJS-Router loading Substates

Quiz

Description

The Ember.js provides a loading process to implement the loading substates. If the router promises fails, Ember.js will find an appropriate loading route that can transition to the child template to resolve immediately.

The loading Event

If the promises doesn't immediately resolve, the loading event will fire the default route application template to overcome from the failure of the promises.

Syntax

Ember.Route.extend({
   //put your model
   actions: {
      loading: function(transition, originalRoute){
         return true;
      }
   }
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs loading Substates</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="index">
         {{#each item in content}}
            <!-- displaying the items of an array -->
            <h2>{{item}}</h2>
         {{/each}}
      </script>

      <script type="text/x-handlebars" data-template-name="loading">
         <!-- this is the message for the laoding event -->
         <h1>Loading Contents Please Wait... </h1>
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.IndexRoute = Ember.Route.extend({
            model: function(){
               return new Promise(function(resolve, reject){
                  //setting up the time out for data display in mili sec
                  window.setTimeout(function(){
                     data = ['Mack', 'Micky', 'Manu'];
                     //promises the data
                     resolve(data);
                     //halts for 2000 milisec
                  }, 2000);
               });
            },
            actions: {
               loading: function(transition, originalRoute){
                  // Return true to bubble this event to 'loading' or 'indexRoute'
                  return true;
               }
            }
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works:

Save above code in routing_load_subst.htm file
Open this HTML file in a browser.

Print Page