Question

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

Answer 1

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

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>

如果不清楚，请告诉我。

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

1 个答案: