Ember.js is a popular JavaScript framework for building web applications. One useful feature of Ember is the Transition object, which represents a transition between two routes in an Ember application. The Transition object has a number of methods that can be used to perform different actions during a transition, including the then() method.
The then() method allows you to specify a function that should be executed once the transition has been completed. This can be useful for performing tasks such as updating the UI or performing cleanup after the transition.
Syntax:
transitionTo('routeName').then(function(){
// your code here
});
Parameters:
- routeName: a route name on which the page will transition to.
- function: a function that will be executed on route transition.
Step 1: To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:
npm install ember-cli
Step 2: Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
To start the server, type:
ember serve
Example 1: Type the following code to generate the route for this example:
ember generate route home ember generate route second
app/routes/home.js
Javascript
import Route from '@ember/routing/route'; export default class HomeRoute extends Route { actions = { transitionToSecondRoute() { this.transitionTo('second').then(() => { console.log('Transition to second route complete'); }); } } } |
app/templates/home.hbs
Javascript
<button {{action 'transitionToSecondRoute'}}> Transition to Second Route </button> |
Output:
Example 2: Type the following code to generate the route for this example:
ember generate route home ember generate route second
app/routes/home.js
Javascript
import Route from '@ember/routing/route'; export default class HomeRoute extends Route { actions = { transitionToSecondRoute() { this.transitionTo('invalid-route').then(() => { console.log('Transition to invalid route complete'); }).catch((error) => { console.error(error); }); } } } |
app/templates/home.hbs
HTML
<button {{action 'transitionToSecondRoute'}}> Transition to Second Route </button> |
Output:
Reference: https://emberjs.com/api/ember/3.23/classes/Transition
