javascript - 如何在 ember.js 中创建子导航

Question

这个问题困扰了我好几天。当用户访问“关于”页面时，我需要一个子导航显示在应用程序模板的主导航下。我觉得我一定是错过了一些重要的概念，因为我一直在阅读，如果在 Ember 中做某事非常困难，那么你可能做错了。而且我觉得 Ember 应该能够轻松处理简单的子导航。

当单击“关于”时，我希望子导航显示在主导航下方的细白色水平条上。

我不能将子导航放在关于模板中，因为导航代码在应用程序模板中。

我的路由器:

App.Router.map(function() {
  this.resource("about", function() {
    this.route("philosophy");
    this.route("leadership");
    this.route("staff");
    this.route("affiliations");
  });

  this.route("conditions");
  this.route("programs");
  this.route("testimonials");
});

我无法在应用程序模板中呈现部分内容，因为我只想在有人访问/about url 时显示它。

我试过普通的旧 jQuery 显示和隐藏:

App.ApplicationController = Ember.ObjectController.extend({
  currentRouteChanged: function() {
    if(this.get('currentRouteName').indexOf('about') > -1) {
      $("ul").removeClass("sub-nav-list-hide");
      $("ul").addClass("sub-nav-list-show");
    }
  }.observes('currentRouteName')
});

当你点击它时它会起作用，但当你点击后退按钮或导航到另一个页面时，子导航不会隐藏。

我被卡住了，我觉得我让这条路太难了。

Answer 1

我会在 App.AboutRoute 中的应用程序 Controller 中设置一个属性

App.AboutRoute = Ember.Route.extend({
  activate: function(){
    this.controllerFor('application').set('renderAboutSubNav', true);
  },
  deactivate: function(){
    this.controllerFor('application').set('renderAboutSubNav', false);
  }
});

然后检查应用程序模板中的属性。

{{#if renderAboutSubNav}}
  {{render 'about/subnav'}}
{{/if}}

这是一个例子 jsbin