Ember.js - Updating navigation bar on route change

Question

I'm new to Ember.js and still trying to wrap my head around it.

One of things I've been trying to do lately is changing the buttons of a navigation bar depending on which route I am. My application has two levels of navigation. The first level is a bar which allows the user to navigate through the main tabs of the application, and this changes the router. Then inside each of those tabs, there is a sub-navigation bar which allows the user to navigate to more specific tabs inside the first-level tabs.

I understand how nested routing works, but I'm not sure how to implement such a navigation system. What I want to do is update the sub-navigation bar with the labels specific to the 1st level tab the user is in.

Any ideas?

Update with code for the navigation/routes:

App.Router.map(function() {  
    this.resource("spots", function() {  
        this.route("aroundYou");
        this.route("search");  
    });  
    this.resource("rankings", function() {  
        this.route("topUsers");  
        this.route("topSpots");  
    }  
});

can you post your navigation/routes code that you have so far? — intuitivepixel
I'm mean rather the code where you assemble the toplevel menu, so it will be easier to help out. — intuitivepixel

Sherwin Yu Sherwin Yu · Accepted Answer · 2013-05-28T00:58:50

You can handle this programmatically by keeping track of all your menuitems and submenuitems (these are more or less your routes) in a navigation controller. The navigation template displays all of the menuitems and the submenuitems of the active menuitem. Clicking on a menuitem changes the active menuitem, and clicking on a submenuitem triggers an navigateTo action, in which you can do the logic to handle the transitioning.

NavigationController:

navigationItems: ["spots, rankings"]
subNavigationItems: {
  spots: [ "aroundYou" , "search" ]
  rankings: ["topUsers", "topSpots"]
}

// `newItem` is the navigation menu item the user clicked on
selectNavigationItem: function(newItem) {
    this.set('currentNavigationItem', newItem);
}

// `target` is a string from subNavigationItems that gets passed through the action helper when the user clicks on a submenu item
navigateTo: function(target) {
  // construct the route from the active navigation item and the chosen subitem
  route = this.get('currentNavigationItem') + "." + target
  this.transitionToRoute(route)
}

currentNavigationItem: null // or whatever default

// change the subnavigation items to display based on the current navigation path
currentSubNavigationItems: function() {
  key = this.get('currentNavigationItem')
  return this.get('subitems')[key]
}.property('currentNavigationItem')

navigation.hbs:

<div class="navigation">
{{#each navigationItem in navigationItems}}
   <a {{action selectNavigationItem navigationItem}}> {{navigationItem}} </a>
{{/each}}
</div>
<div class="subnavigation">
{{#each subNavigationItem in currentSubNavigationItems}}
   <a {{action subNavigateTo subNavigationItem}}> {{subNavigationItem}} </a>
{{/each}}
</div>

Let me know if that's unclear.

Ember.js - Updating navigation bar on route change

1 Answers