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
… [Trackback]
[…] Read More on on that Topic: geeksforgeeks.org/ember-js-transition-then-method/ […]
… [Trackback]
[…] Find More to that Topic: geeksforgeeks.org/ember-js-transition-then-method/ […]
… [Trackback]
[…] Read More Information here to that Topic: geeksforgeeks.org/ember-js-transition-then-method/ […]
… [Trackback]
[…] There you will find 60011 more Info to that Topic: geeksforgeeks.org/ember-js-transition-then-method/ […]