EmberJS-Router error Substates

Quiz

Description

The loading substates have an analogous approach to handle an error occurred during the transition. The default loading event handlers are an implement the error handlers finds an error substate to enter. When an error caught the router immediately transition the substate to handle an error.

The error Event

The error event can be used to handle and display an error message by redirecting to the specified page. You can also use dynamic routing with error handling.

Syntax

Router.map(function() {
   this.route('temp1', function() {
      this.route('temp2');
   });
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs error 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">
         <h1>{{data}}</h1>
      </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/x-handlebars" data-template-name="error">
         <!-- this is the message for the error event -->
         <h2><font color="red">Failed To Load The Contents Please Try Again Later...</font></h2>
      </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 = "Manu";
                     //Failure of promise data
                     reject(data);
                  }, 2000);
               });
            },

            actions: {
               error: 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_err_subst.htm file
Open this HTML file in a browser.

Print Page