Question

我很好奇在Ember中实现子导航的最佳方法是什么。在application.hbs中，我的主导航有'about'，'programs'等。当点击'about'时，我希望在主导航正下方的行上显示另一个页面列表。我已经在application.hbs中使用{{outlet}}所以我不能把另一个放在我想要显示subnav的地方。

这就是我所拥有的：

<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>ABOUT</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">
             // Would like SUBNAV to display here
    </div>
</div>
{{outlet}}

Answer 1

您可以使用named outlet并勾选路线的renderTemplate功能，将其渲染到正确的位置，点击此处查看简单的demo. （抱歉，但是风格明显搞砸了）

如果您的指定商店位于index模板内，则可以：

索引模板

...
<div class="row subnav">
  <div class="large-12 colummns">
    {{outlet 'subnav'}}
  </div>
</div>
...

Subnav模板

<script type="text/x-handlebars" id="subnav">
  <h2>Hello I'm Subnav!</h2>
</script>

索引路线

App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render(); // this renders the index template per se
    // and this additional call renders the subnav template into the named outlet
    this.render('subnav', { //the name of your template
      outlet: 'subnav', //the name of the named outlet
      into: 'index' //the name of the template where the named outlet should be rendered into
    });
  }
});

请注意，无论您使用何种路线，只要您像上面提到的那样渲染它们，就可以拥有任意数量的指定插座。

希望它有所帮助。

Ember.js添加subnav的最佳实践

1 个答案:

索引模板

Subnav模板

索引路线