Databases
StackOverflow2013
Postsdbo
POHow to programmatically transition between routes using Ember.js' new Router
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to programmatically transition between routes using Ember.js' new Router
    text
    copied!<h2>Question:</h2> <p>How do you do programmatically transition to a new route using the new Ember.js Router?</p> <h2>Background / Context</h2> <p>With the old Ember.js Router you could programmatically transition between routes/states using the router's <code>send</code> method:</p> <pre><code>//OLD Router Syntax App = Ember.Application.create({ Router: Ember.Router.extend({ root: Ember.Route.extend({ aRoute: Ember.Route.extend({ route: '/', moveElsewhere: Ember.Route.transitionTo('bRoute') }), bRoute: Ember.Route.extend({ route: '/someOtherLocation' }) }) }) }); App.initialize(); </code></pre> <p>Programatic Transition:</p> <pre><code>App.get('router').send('moveElsewhere'); </code></pre> <p>Given the new Ember.js Router (below) how do we accomplish the same thing?</p> <pre><code>//NEW Router Syntax App.Router.map(function(match) { match('/').to('aRoute'); match('/someOtherLocation').to('bRoute'); }); </code></pre> <h2>Work Around (Bad Solution?)</h2> <p>this can't be right, right?:</p> <pre><code>window.location = window.location.href + "#/someOtherLocation"; </code></pre> <h2>Solutions that don't seem to work with the New Router:</h2> <p><strong>1)</strong> calling the <code>send</code> method on the <code>App.router</code> instance</p> <pre><code>&gt; App.router.send("moveElseWhere") TypeError: Cannot call method 'send' of undefined </code></pre> <p><strong>2)</strong> Explicitly declaring the Route and setting an event</p> <pre><code>App.ARoute = Ember.Route.extend({ events: { moveElseWhere: function(context){ this.transitionTo('bRoute'); } } ); App.UploadRoute.moveElseWhere() TypeError: Object (subclass of Ember.Route) has no method 'moveElseWhere' </code></pre> <hr> <p><em>Note: At time of writing the <a href="http://emberjs.com/api/classes/Ember.Router.html">Ember.js Router documentation</a> still refers to the Old Router, where as the <a href="http://emberjs.com/guides/routing/defining-your-routes/">Ember.js Router guide</a> refers to the new Router</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload