MENU
Edit
In Place Editing Advanced Editing

Route#transitionTo()

transitionTo (name, models, options) Transitionpublic

Defined in packages/ember-routing/lib/system/route.js:886

Transition the application into another route. The route may be either a single route or route path:

1
2
this.transitionTo('blogPosts');
this.transitionTo('blogPosts.recentEntries');

Optionally supply a model for the route in question. The model will be serialized into the URL using the serialize hook of the route:

1
this.transitionTo('blogPost', aPost);

If a literal is passed (such as a number or a string), it will be treated as an identifier instead. In this case, the model hook of the route will be triggered:

1
this.transitionTo('blogPost', 1);

Multiple models will be applied last to first recursively up the route tree.

1
2
3
4
5
6
7
8
App.Router.map(function() {
  this.route('blogPost', { path:':blogPostId' }, function() {
    this.route('blogComment', { path: ':blogCommentId', resetNamespace: true });
  });
});
 
this.transitionTo('blogComment', aPost, aComment);
this.transitionTo('blogComment', 1, 13);

It is also possible to pass a URL (a string that starts with a /). This is intended for testing and debugging purposes and should rarely be used in production code.

1
2
3
this.transitionTo('/');
this.transitionTo('/blog/post/1/comment/13');
this.transitionTo('/blog/posts?sort=title');

An options hash with a queryParams property may be provided as the final argument to add query parameters to the destination URL.

1
2
3
4
5
6
this.transitionTo('blogPost', 1, {
  queryParams: { showComments: 'true' }
});
 
// if you just want to transition the query parameters without changing the route
this.transitionTo({ queryParams: { sort: 'date' } });

See also replaceWith.

Simple Transition Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
App.Router.map(function() {
  this.route('index');
  this.route('secret');
  this.route('fourOhFour', { path: '*:' });
});
 
App.IndexRoute = Ember.Route.extend({
  actions: {
    moveToSecret: function(context) {
      if (authorized()) {
        this.transitionTo('secret', context);
      } else {
        this.transitionTo('fourOhFour');
      }
    }
  }
});

Transition to a nested route

1
2
3
4
5
6
7
8
9
10
11
12
13
App.Router.map(function() {
  this.route('articles', { path: '/articles' }, function() {
    this.route('new');
  });
});
 
App.IndexRoute = Ember.Route.extend({
  actions: {
    transitionToNewArticle: function() {
      this.transitionTo('articles.new');
    }
  }
});

Multiple Models Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
App.Router.map(function() {
  this.route('index');
 
  this.route('breakfast', { path: ':breakfastId' }, function() {
    this.route('cereal', { path: ':cerealId', resetNamespace: true });
  });
});
 
App.IndexRoute = Ember.Route.extend({
  actions: {
    moveToChocolateCereal: function() {
      let cereal = { cerealId: 'ChocolateYumminess' };
      let breakfast = { breakfastId: 'CerealAndMilk' };
 
      this.transitionTo('cereal', breakfast, cereal);
    }
  }
});

Nested Route with Query String Example

1
2
3
4
5
6
7
8
9
10
11
12
13
App.Router.map(function() {
  this.route('fruits', function() {
    this.route('apples');
  });
});
 
App.IndexRoute = Ember.Route.extend({
  actions: {
    transitionToApples: function() {
      this.transitionTo('fruits.apples', { queryParams: { color: 'red' } });
    }
  }
});

Parameters:

name String
the name of the route or a URL
models ...Object
the model(s) or identifier(s) to be used while transitioning to the route.
options [Object]
optional hash with a queryParams property containing a mapping of query parameters

Returns:

Transition
the transition object associated with this attempted transition
doc_EmberJs
doc_EmberJs
2025-01-10 15:47:30
Comments
Leave a Comment

Please login to continue.