Ember.js-在路线更改时更新导航栏

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");  
    }  
});

Answer 1

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.