Working with transitions

When inside a route, you can use the controller to transition to another route. We'll look at an example on how to transition from one route to another.

How to do it...

  1. In a new application, generate the following files:
    $ ember g route foo1
$ ember g route foo2
$ ember g controller foo1
$ ember g controller foo2
$ ember g template index

    This will generate two different routes for us—the foo1 and foo2 routes. Each route will have a button that transitions to the other route. Each controller will handle the action logic.

  2. Add an action to the foo1 controller:
    // app/controllers/foo1.js
import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
      enter(){
        this.transitionToRoute('foo2');
      }
    }
});

    This controller has one action called enter that transitions to the route called foo2. The this.transitionToRoute method is used to transition to different routes in the application. It takes two arguments. The first argument is the name of the route. The second argument is optional, and it is where you enter in the model. By default, it will be serialized in the URL if added.

    The trasintionToRoute method can take route paths as well. For example, you might have a foo2 nested route called foo3. You can transition to this route by calling this.trasitionToRoute('foo2.foo3').

  3. Add an action to the foo2 controller:
    // app/controllers/foo2.js
import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
      enter(){
        this.transitionToRoute('foo1');
      }
    }
});

    When the enter action is triggered, it transitions to the foo1 route.

  4. Update the foo1 template:
    // app/templates/foo1.hbs
This is Foo1<br>

<button {{action 'enter'}}>Move to route foo2</button>

    This button triggers the enter action in the foo1 controller.

  5. Update the foo2 template:
    // app/templates/foo2.hbs
This is Foo2<br>
<button {{action 'enter'}}>Move to route foo1</button>

    This button triggers the enter action in the foo2 controller.

  6. Add a link to both the routes in the index template file:
    // app/templates/index.hbs
{{link-to 'Foo1 Route' 'foo1'}}<br>
{{link-to 'Foo2 Route' 'foo2'}}<br>

    This uses the link-to helper in a non-block form. The first argument is the name displayed and the second is the name of the route.

  7. Update the application template file:
    // app/templates/application.hbs
{{#link-to 'application'}}<h2 id="title">Welcome to Ember</h2>{{/link-to}}

{{outlet}}

    The application template file has a link back to the application at the top.

  8. Run ember server and you'll see the following screen after opening a web browser:
    How to do it...

    This displays a link to each route.

  9. Click on the Foo1 Route link. The following page will be displayed:
    How to do it...

    This displays the foo1 route.

  10. Click on the Foo2 Route button. The following screen will be displayed:
    How to do it...

    After the button is clicked, the foo2 route is displayed.

How it works...

To navigate through an application, we can use transitions inside a controller. The trasitionToRoute method is used to transition from one route to another. It's a part of the Ember.Controller class.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.216.38