- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
Router Preventing Transitions Via willTransition
It fires the willTransition action on currently active routes when you re-attempt the transition by using the {{link-to}} helper or the transitionTo method.
Syntax
Ember.Route.extend ({ actions: { willTransition(transition) { //handle the transition } } });
Example
The example given below depicts preventing transitions via the willTransition action on active route. Create a route called willtransition and open the router.js file with the following code to define URL mappings −
import Ember from 'ember'; //Access to Ember.js library as variable Ember import config from './config/environment'; //It provides access to app's configuration data as variable config //The const declares read only variable const Router = Ember.Router.extend ({ location: config.locationType, rootURL: config.rootURL }); Router.map(function() { this.route('willtransition'); }); //It specifies Router variable available to other parts of the app export default Router;
Create the application.hbs file and add the following code −
//link-to is a handlebar helper used for creating links {{link-to 'Click For Transition' 'willtransition'}} {{outlet}} //It is a general helper, where content from other pages will appear inside this section
Open the file willtransition.js file created under app/routes/ with the following code −
import Ember from 'ember'; export default Ember.Route.extend ({ actions: { willTransition(transition) { //decalring the self variable var self = this; //checking whether self variable is false or not if (!this.get('allowTransition')) { document.write('<b><font color = "red">'); //display the message document.write("transition abort"); document.write('</font><br>'); transition.abort(); //calling abort function Ember.run.later(function () { //setting the self variable to true self.set('allowTransition', true); document.write('<b><font color = "blue">'); //display the message document.write("transition retry"); document.write('</font>'); transition.retry(); //calling retry function }, 500); } } } });
Open the willtransition.hbs file created under app/templates/ with the following code −
<h2>Hello...Welcome to Tutorialspoint!!!</h2> {{outlet}}
Output
Run the ember server and you will receive the following output −
When you click on the link, it will display the data. But if you click on the back link, the willTransition action calls the transition.abort() and then transition.retry() method.