想要Ember.js命名为只能在点击显示 [英] Want Ember.js named outlet to only display on click

问题描述

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

 关于条件程序推荐
  

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

 哲学领导人员关系
  

然后最后当你点击，说'哲学'，哲学模板加载，但'关于'导航仍然是活跃的，现在'哲学'导航是活跃的。

application.hbs：

 < div class =row left-nav> 
 {{#linkToindex}}< img class =ew_logosrc =assets / ew.png> {{/ linkTo}} 
< / div> 
< div class =row nav> 
< div class =large-12 colummns> 
< ul class =inline-list top-nav> 
< li>< h6> {{link tosubnav}}关于{{/ 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（）
＃这将呈现应用程序模板se 
＃，这个额外的调用将subnav模板渲染到命名的插座
 @rendersubnav，＃你的模板的名称
 outlet：subnav＃命名插座的名称
 into：application＃指定出口应该呈现为
的模板的名称
  

谢谢！

编辑

还补充说，当点击关于时，我不希望subnav显示在url中。对不起，所有的问题。只是好奇，如果有一个绝对的方法来做到这一点，而不是黑客一堆jquery。

解决方案

你应该使用嵌套资源。

这是一个 jsbin ，显示了如何工作。

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

  App.Router.map（function（） {
 this.resource（about，function（）{
 this.route（philosophy）; 
 this.route（leader）; 
 this.route （staff）; 
 this.route（affiliations）; 
}）; 
 
 this.route（conditions）; 
 this.route （程序）; 
 this.route（testimonials）; 
}）; 
  

在这里，您定义一个关于资源的有一些嵌套的路线。

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

这里是应用程序模板：

 < h1> MAIN< / h1> 
< nav> 
< ul>关于{{/ linkTo}}< / li>的
< li> {{linktoabout}} 
< li> {{＃linkToconditions}}条件{{/ linkTo}}< / li> 
< li> {{＃linkToprograms}}程序{{/ linkTo}}< / li> 
< li> {{link totestimonials}}见证{{/ linkTo}}< / li> 
< / ul> 
< / nav> 
 {{outlet}} 
  

这里是关于模板：

 < h2>关于< / h2> 
< nav> 
< ul> 
< li> {{linktoabout.philosophy}}哲学{{/ linkTo}}< / li> 
< li> {{linktoabout.leadership}}领导{{/ linkTo}}< / li> 
< li> {{＃linkToabout.staff}} staff {{/ linkTo}}< / li> 
< li> {{＃linkToabout.affiliations}} affiliate {{/ linkTo}}< / li> 
< / ul> 
< / nav> 
 {{outlet}} 
  

这是关于/哲学的 / code>模板：

 < h3> PHILOSOPHY< / h3> 
  

Ember将自动添加 .active 类到目前路线中的所有链接。

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.

解决方案

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.

这篇关于想要Ember.js命名为只能在点击显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！