0

在@intuitivepixel 的帮助下，我有一个接近正常工作的子导航。现在的问题是，当我加载根目录时，子导航已经显示。子导航应该只是“关于”部分的一部分——主导航是：

about   conditions   programs   testimonials

在索引上，即应用程序的根目录上，这些是我希望显示的唯一链接。但是，当您单击“关于”时，我希望在主导航下方显示一个子导航，其中“关于”设置为活动，可用的子链接如下：

philosophy    leadership    staff    affiliations

最后，当您单击“哲学”时，哲学模板会加载，但“关于”导航仍然处于活动状态，现在“哲学”导航处于活动状态。

应用程序.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
)

谢谢！

编辑

我还应该补充一点，当单击“关于”时，我不希望“subnav”显示在 url 中。抱歉有这些问题。只是好奇是否有一种方法可以在不破解一堆 jquery 的情况下做到这一点。

4

1 回答 1

0

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

这是一个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为当前路由中的所有链接添加一个类。

于 2013-08-27T22:33:37.540 回答