EmberJS-Router Based on other Application State

Quiz

Description

This navigates to the previous URL, if the beforeModel hook does not abort and the remaining hooks (model, afterModel, setupController, renderTemplate) will be executed normally.

Syntax

Ember.Route.extend({
   activate: function() {
      var controller = this.controllerFor('application');
      controller.set('lastFilter', this.templateName);
   }
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Based on other Application State</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">
         <h3>{{#link-to "section1"}}Click for to get section1{{/link-to}}</h3>
      </script>

      <script type="text/x-handlebars" data-template-name="section1">
         <h2>section 1</h2>
      </script>

      <script type="text/x-handlebars" data-template-name="section2">
         <!-- section2 contents -->
         <h2>This is section 2</h2>
         <p>You can conditionally transition based on some other application state.</p>
      </script>

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

         App.Router.map(function() {
            this.route('section1');
            this.route('section2');
         });

         App.Section1Route = Ember.Route.extend({
            //redirecting to the section2 route via section1 route
            redirect: function() { this.transitionTo('section2'); }
         });
      </script>
   </body>
</html>

Output

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

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

Print Page