Ember.js添加sub-v的最佳实践

Question

我很好奇在Ember中实现子导航的最佳方式是什么。在application.hbs中，我有一个带有"about"、"programs"等的主导航。当单击"about"时，我希望在主导航正下方的行上显示另一个页面列表。我已经在application.hbs中使用了｛｛outlet｝｝，所以我无法将另一个放在我希望显示sub-v的位置。

这是我的：

<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

您可以使用一个命名的出口并挂接到路由的renderTemplate函数中，将其渲染到正确的位置，请参阅此处获取简单的演示（抱歉，样式明显有问题）

例如，如果您的命名网点位于index模板内，则您可以：

索引模板

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

子导航模板

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

注意，无论你在哪条路线上，只要你像上面提到的那样渲染它们，你就可以拥有你想要的任意多个命名出口。

希望能有所帮助。