希望Ember.js命名的插座僅在單擊時顯示

Question

由於@intuitivepixel的幫助，我的子導航接近正常工作。 現在的問題是，當我加載根目錄時，subnav已經顯示。 子導航僅應是“關於”部分的一部分-主導航為：

about   conditions   programs   testimonials

在索引（應用程序的根目錄）上，這些是我想要顯示的唯一鏈接。 但是，當您單擊“關於”時，我希望子導航顯示在主導航的正下方，其中“關於”設置為活動，可用的子鏈接為：

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
)

謝謝！

編輯

我還應該補充一點，當單擊“關於”時，我不想在URL中顯示“ subnav”。 抱歉有這些問題。 只是好奇是否有一種余燼方法可以做到這一點而又不會破壞一堆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類。