Question

由于@intuitivepixel的帮助，我有一个subnav接近正常工作。现在的问题是，当我加载根时，subnav已经显示。 subnav应该只是'about'部分的一部分 - 主导航是：

about   conditions   programs   testimonials

在索引上，应用程序的根目录，这些是我想要显示的唯一链接。但是当你点击“关于”时，我希望子主题显示在主导航的正下方，并将'about'设置为活动状态，将可用的子链接设置为：

philosophy    leadership    staff    affiliations

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

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'时，我不希望'subnav'显示在url中。抱歉有这些问题。只是好奇，如果有一个蠢货的方式来做到这一点，而不是乱砍一堆jquery。

Answer 1

您应该使用nested resources。

这是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资源，它有一些嵌套路由。

然后，关于conventions的全部内容。您只需正确命名模板即可。

以下是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类。

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

1 个答案: