0

我是 Ember.js 的新手，但仍在努力解决它。

我最近一直在尝试做的一件事是根据我所在的路线更改导航栏的按钮。我的应用程序有两个级别的导航。第一级是一个栏，允许用户浏览应用程序的主要选项卡，这会更改路由器。然后在每个选项卡内，都有一个子导航栏，允许用户导航到一级选项卡内的更具体的选项卡。

我了解嵌套路由的工作原理，但我不确定如何实现这样的导航系统。我想要做的是使用特定于用户所在的第一级选项卡的标签更新子导航栏。

有任何想法吗？

更新导航/路线的代码：

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

1 回答 1

0

您可以通过在导航控制器中跟踪所有菜单项和子菜单项（这些或多或少是您的路线）以编程方式处理此问题。导航模板显示所有菜单项和活动菜单项的子菜单项。单击菜单项会更改活动的菜单项，单击子菜单项会触发一个navigateTo动作，您可以在其中执行逻辑来处理转换。

导航控制器：

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')

导航.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>

如果不清楚，请告诉我。

于 2013-05-28T00:58:50.517 回答