Want Ember.js named outlet to only display on click

问题

I have a subnav close to working properly thanks to the help of @intuitivepixel. The problem now is that when I load the root, the subnav is already displaying. The subnav should only be a part of the 'about' section -- the main nav is:

about   conditions   programs   testimonials

On the index, the root of the app, these are the only links I would like displayed. But when you click 'about' I would like a subnav to display right below the main nav with 'about' set as active and the available sub links as:

philosophy    leadership    staff    affiliations

Then finally when you click on, say 'philosophy', the philosophy template loads but the 'about' nav is still active, and now the 'philosophy' nav is active.

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
)

Thank you!

EDIT

I should also add that I don't want 'subnav' to show up in the url when 'about' is clicked. Sorry for all the questions. Just curious if there an ember way to do this without hacking a bunch of jquery.

回答1:

You should use nested resources for that.

Here's a jsbin that shows how that would work.

The main part is the routes/resources declaration:

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");
});

Here, you define an aboutresource which have a few nested routes.

Then, it's all about conventions. You just have to properly name your templates.

Here's the application template:

<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}}

Here's the about template:

<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}}

Here's the about/philosophy template:

<h3>PHILOSOPHY</h3>

Ember will automagically add an .active class to all the links in the current route.

来源：https://stackoverflow.com/questions/18475041/want-ember-js-named-outlet-to-only-display-on-click

标签

javascript

ember.js