希望Ember.js命名的出口只在点击时显示

Question

由于@直觉像素的帮助，我有一个接近正常工作的子nv。现在的问题是，当我加载根目录时，子目录已经显示了。子导航应该只是"关于"部分的一部分——主导航是：

about   conditions   programs   testimonials

在应用程序的根目录索引上，这些是我唯一想显示的链接。但当你点击"about"时，我希望在主导航的正下方显示一个sub-v，"about"设置为活动，可用的子链接为：

philosophy    leadership    staff    affiliations

最后，当你点击时，说"哲学"，哲学模板加载，但"关于"导航仍处于活动状态，现在"哲学"导航处于活动状态。

application.hbs:

<div class="row left-nav">
{{#linkTo "index"}}<img class="ew_logo" src="assets/ew.png">{{/linkTo}}
</div>
<div class="row nav">
<div class="large-12 colummns">
    <ul class="inline-list top-nav">
            <li><h6>{{#linkTo "subnav"}}ABOUT{{/linkTo}}</h6></li>
            <li><h6>//</h6></li>
            <li><h6>CONDITIONS</h6></li>
            <li><h6>//</h6></li>
            <li><h6>PROGRAMS</h6><li>
            <li><h6>//</h6></li>
            <li><h6>TESTIMONIALS</h6></li>
    </ul>
</div>
</div>
<div class="row subnav">
    <div class="large-12 colummns">
        {{outlet 'subnav'}}
    </div>
</div>
{{outlet}}

application_route.coffee:

Ew.ApplicationRoute = Ember.Route.extend(renderTemplate: ->
  @render() 
  # this renders the application template per se
  # and this additional call renders the subnav template into the named outlet
  @render "subnav", #the name of your template
    outlet: "subnav" #the name of the named outlet
    into: "application" #the name of the template where the named outlet should be rendered into
)

谢谢！

编辑

我还应该补充一点，当点击"about"时，我不希望"subgov"出现在url中。很抱歉有这么多问题。只是好奇是否有一种ember方法可以做到这一点，而不需要破解一堆jquery。

Answer 1

您应该为此使用嵌套资源。

这里有一个jsbin，展示了它是如何工作的。

主要部分是路线/资源声明：

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资源。

然后，这一切都是关于惯例的。你只需要正确命名你的模板。

这是application模板：

<h1>MAIN</h1>
<nav>
  <ul>
    <li>{{#linkTo "about"}}about{{/linkTo}}</li>
    <li>{{#linkTo "conditions"}}conditions{{/linkTo}}</li>
    <li>{{#linkTo "programs"}}programs{{/linkTo}}</li>
    <li>{{#linkTo "testimonials"}}testimonials{{/linkTo}}</li>
  </ul>
</nav>
{{outlet}}

这是about模板：

<h2>ABOUT</h2>
<nav>
  <ul>
    <li>{{#linkTo "about.philosophy"}}philosophy{{/linkTo}}</li>
    <li>{{#linkTo "about.leadership"}}leadership{{/linkTo}}</li>
    <li>{{#linkTo "about.staff"}}staff{{/linkTo}}</li>
    <li>{{#linkTo "about.affiliations"}}affiliations{{/linkTo}}</li>
  </ul>
</nav>
{{outlet}}

这是about/philosophy模板：

<h3>PHILOSOPHY</h3>

Ember将自动向当前路由中的所有链接添加一个.active类。