Javascript Ember.js-仅在单击时在application.hbs上显示subnav，而不呈现其他模板

我在尝试在点击灰烬时显示subnav时遇到问题。在我的应用程序模板中，我有一个导航栏，在根目录中，我有一个索引模板，它是一个全浏览器宽度的模板，位于应用程序模板的导航栏后面。看起来像这样：

我想做的是，当点击“关于”时，主导航正下方的白色水平条上会显示一个子导航。白色水平条也是应用程序模板的一部分。当点击“关于”时，这是页面上唯一我想更改的内容。然后，当您单击子AV上的项目时，说“STAFF”，它将呈现about.STAFF模板

我的问题是如何在应用程序模板上实现这一点。因为如果用户当前在“程序”模板上，然后他们单击“关于”，我希望用户停留在程序模板上，但子AV仍会下降到主导航下方

我尝试过嵌套路由：

Ew.Router.map ->
  @.resource "about", ->
    @.route "philosophy"
    @.route "leadership"
    @.route "staff"
    @.route "affiliations"
  @.route "conditions"
  @.route "programs"
  @.route "testimonials"

然后，我尝试使用以下ApplicationRoute在应用程序hbs中呈现一个命名的出口

Ew.ApplicationRoute = Ember.Route.extend(
  renderTemplate: ->
    @.render
    @.render 'about',
        outlet: 'about',
        into: 'application'
)

但我只是得到一个错误：

Error while loading route: TypeError {} ember.js?body=1:382
Uncaught TypeError: Cannot call method 'connectOutlet' of undefined 

---

我希望这样做，而不必在其中插入大量jquery。我希望这是有意义的，我真的很感谢任何帮助。

我设置sub-nav的方式，就是使用sub-nav.hbs模板和sub-nav控制器来管理活动状态。我从主模板渲染它，如下所示： {{render'sub nav'}} 您可以在控制器中编写代码，以确定要显示哪些链接。希望这有点帮助

这是我的控制器。这是一个类似“向导”的流程，所以我不希望所有链接都被启用。（我还使用Ember StateManager对象来管理我的应用程序的状态。）

---

MyApp.SubNavController=Ember.Controller.extend({
getAllState:函数（）{
返回[
{name:“start”，label:“start”，active:true，enabled:true，href:“#/myapp/start”}，
{名称：“驱动程序”，标签：“驱动程序”，href:“#/myapp/Driver”}，
{名称：“车辆”，标签：“车辆”，href:“#/myapp/Vehicle”}，
{名称：“详细信息”，标签：“详细信息”，href:“#/myapp/details”}
];
},
init:function（）{
this.set（'states'，this.getAllStates（））；
这个.setActive（）；
},
setActive:函数（）{
//托多：把这个清理干净。有点粗糙。
debug（“当前状态：”+MyApp.stateManager.get（'currentState.name'）；
var i=0，
newStates=this.getAllStates（），
statesLength=newStates.length，
activeIndex=0；
对于（i=0；i对于（i=activeIndex；i谢谢@gstrop。无论如何，我可以看到你是如何设置控制器的？我在上面的回答中添加了。这不完全是你需要的，但应该会有一点帮助。祝你好运。
MyApp.SubNavController = Ember.Controller.extend({
  getAllStates: function() {
    return [
      { name: "start", label: "Start", active: true, enabled: true, href: "#/myapp/start"},
      { name: "drivers", label: "Driver", href: "#/myapp/driver"},
      { name: "vehicles", label: "Vehicle", href: "#/myapp/vehicle"},
      { name: "details", label: "Details", href: "#/myapp/details"}
    ];
  },

  init: function() {
    this.set('states', this.getAllStates());
    this.setActive();
  },

  setActive: function() {
    // TODO: Clean this up.  it's a little hacky.
    Ember.Logger.debug("current state: " + MyApp.stateManager.get('currentState.name'));
    var i = 0,
        newStates = this.getAllStates(),
        statesLength = newStates.length,
        activeIndex = 0;
    for (i=0; i< statesLength; i++) {
      newStates[i].active = false;
      if (newStates[i].name===MyApp.stateManager.get('currentState.name')) {
        newStates[i].active = true;
        activeIndex = i;
      }
    }
    for(i=activeIndex; i<statesLength; i++) {
      delete newStates[i].href;
    }
    this.set('states', newStates);
  }.observes('MyApp.stateManager.currentState')
});