0

我很好奇在 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}}
4

1 回答 1

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

请注意，您可以拥有任意数量的命名出口，只要您按照上面提到的方式渲染它们，无论您在哪条路线中。

希望能帮助到你。

于 2013-08-27T19:03:45.450 回答