Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>From the "<a href="http://emberjs.com/guides/router_primer/" rel="nofollow">Understanding the Ember.js Router: A Primer</a>" guide:</p> <blockquote> <p>Every Ember.Route fires an enter and exit callback. Here is a suitable place to insert logging and debugging data as has already appeared in this application.</p> <p>Setting the enableLogging property to true within the Router also helpfully display's the Router's decision-making process. When the browser's debug console is open, the router will print helpful error messages beginning with STATEMANAGER.</p> </blockquote> <p>You can use the <code>enter</code> and <code>exit</code> callbacks as follows:</p> <pre><code>App.Router = Ember.Router.extend({ enableLogging: true, root: Ember.Route.extend({ gotoHome: Em.Route.transitionTo('root.home'), gotoInfo: Em.Route.transitionTo('root.info'), index: Ember.Route.extend({ route: '/', redirectsTo: 'home' }), home: Ember.Route.extend({ route: '/home', connectOutlets: function(router) { router.get('applicationController') .connectOutlet("home"); }, enter: function(router){ console.log('The "enter" event of "home" route has been fired'); }, exit: function(router) { console.log('The "exit" event of "home" route has been fired'); } }), info: Ember.Route.extend({ route: '/info', connectOutlets: function(router) { router.get('applicationController') .connectOutlet("info"); }, enter: function(router){ console.log('The "enter" event of "info" route has been fired'); }, exit: function(router) { console.log('The "exit" event of "info" route has been fired'); } }) }) }); </code></pre> <p>Check <a href="http://jsfiddle.net/schawaska/qAPVP/" rel="nofollow"><strong>this fiddle</strong></a> with the browser console open so you can see the logs when you enter/leave a route.</p> <p><strong>Edit</strong>: If you just want to update the current selected menu based on the route, you don't need to have events hooked up after or before you connect outlets, you actually need your "menu controller" to have a property that keeps track of the selected item and when you enter a given route you update that controller. Your "menu view" will have child menu items with a <code>classNameBindings</code> that is feed based on the selected in the controller (which you can bind to the parent view). <a href="http://jsfiddle.net/schawaska/hEx84/" rel="nofollow"><strong>This fiddle</strong></a> already has it implemented so I'm not gonna write another, but check it out and look at the <code>NavigationController</code>, <code>NavigationView</code> (and <code>NavigationItemView</code>) &amp; the routes. In each <code>connectOutlet</code> I am updating the selected menu item in the controller like this:</p> <p><code>router.set('navigationController.selected', 'MY ROUTE NAME GOES HERE');</code></p> <p>Hope this helps</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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