EmberJS-Router Storing and Retrying a Transition

Quiz

Description

You can also re-attempt on aborted transition.

Syntax

Ember.Route.extend({
   beforeModel: function(transition) {
      if (!this.controllerFor('auth').get('userIsLoggedIn')) {
         var loginController = this.controllerFor('login');
         loginController.set('previousTransition', transition);
         this.transitionTo('login');
      }
   }
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Storing and Retrying a Transition</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="application">
         <h1>Transition</h1>
         {{#link-to 'one'}}ONE{{/link-to}}
         {{#link-to 'two'}}TWO{{/link-to}}
         {{#link-to 'three'}}THREE{{/link-to}}
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="index">
         <h2>Index</h2>
      </script>

      <script type="text/x-handlebars" data-template-name="one">
         <h2>Orange</h2>
      </script>

      <script type="text/x-handlebars" data-template-name="two">
         <h2>Apple</h2>
      </script>

      <script type="text/x-handlebars" data-template-name="three">
         <h2>Lemon</h2>
      </script>

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

         App.AnimatedRoute = Ember.Route.extend({
            _transitioning: false,
            willExit: function() { return Ember.RSVP.resolve(); },
            willEnter: function() { return Ember.RSVP.resolve(); },
            deactivate: function() { this._transitioning = false; },

            afterModel: function(model, transition) {
               var route = this
               transition.then(function() {
                  new Ember.RSVP.Promise(function(resolve, _) {
                     Ember.run.next(this, function() {
                        route.willEnter().then(resolve);
                     });
                  });
               });

               this._super.apply(this, arguments);
            },

            actions: {
               willTransition: function(transition) {
                  var routeNames = transition.handlerInfos.map(function(o) {
                     return o.name;
                  });
                  var isParent = routeNames.indexOf(this.routeName) > -1;
                  if (isParent) { return true; }
                  if (this._transitioning) { return true; }

                  this._transitioning = true;
                  transition.abort();
                  this.willExit().then(function() { transition.retry(); });
               }
            }
         });

         App.BasicRoute = App.AnimatedRoute.extend({
            willEnter: function() {
               console.log("ENTER");
               return $('.outlet').fadeIn().promise();
            },
            willExit: function() {
               console.log("EXIT");
               return $('.outlet').fadeOut().promise();
            }
         });

         Ember.Application.initializer({
            name: 'defaultRoute',
            initialize: function(container) {
               container.register('route:basic', App.BasicRoute);
            }
         });

         App.Router.map(function() {
            this.route('index', {path: '/'});
            this.route('one');
            this.route('two');
            this.route('three');
         });
      </script>
   </body>
</html>

Output

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

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

Print Page