Ember：如何渲染到父路由/模板中的插座？答案

【问题标题】：Ember: how to render to an outlet in a parent route/template?Ember：如何渲染到父路由/模板中的插座？
【发布时间】：2014-09-29 20:49:43
【问题描述】：

我的网站上有一个页面，我们称之为“动物”，它分为两个部分 - 左侧是菜单，右侧是面板中的内容。左侧菜单有两个选项卡； "cats" 和 "dogs"，每个都有一个品种列表。

因此，如果我转到 /animals/dogs/beagle，我希望看到狗选项卡打开并选择了“beagle”，并且右侧面板中显示了有关 beagles 的信息。

我的问题是我的模板的物理层次结构并没有真正遵循我的路线层次结构，因为 /animals 路线实际上是整个屏幕，包括右侧的面板和左侧菜单周围的一些功能（允许它被隐藏等）。动物路线（/cats 或 /dogs）是在左侧菜单中的 {{outlet}} 内呈现的模板，但因为我要呈现的品种信息不在模板“拥有”的区域内在它上面（在左侧菜单内）我真的不知道如何将它放到它应该在的位置（这可能是顶级 /animals 模板内的第二个 {{outlet}} ？）。

如果没有在我的层次结构的最低级别有效地复制整个屏幕以使这两个部分位于同一模板区域内，那么实现此目的的最佳/正确方法是什么？

这里有一些 ASCII 艺术 :)

 ------------------------------------------------------------
| Animals                                                    |
|   ------   ------          ----------------------------    |
|  | Cats | | Dogs |        | All about Persian cats...  |   |
|  |      `------------     |                            |   |
|  | Birman            |    |                            |   |
|  | >Persian<         |    |                            |   |
|  | Siamese           |    |                            |   |
|   -------------------      ----------------------------    |
 ------------------------------------------------------------

【问题讨论】：

标签： templates ember.js routes outlet

【解决方案1】：

您正在寻找的是命名的网点。更多信息在这里：http://emberjs.com/guides/routing/rendering-a-template/

基本上在您的动物模板中，您必须定义出口，例如：

      <h5>ANIMALS</h5>
      <div>
        <div style="with:40%; float: left;">
          <div style="padding-right:20px;">
            <div>NAVIGATION</div>
            SOME NAVIGATION STUFF
        </div>
        <div style="with:60%; float: left;">
          <div>DETAILS</div>
          <div>{{outlet 'details'}}</div>//THIS IS WHERE YOUR DETAILS STUFF WILL BE RENDERED
        </div>
        <div style="clear:both;"></div>
      </div>

您将在名为“details”的出口中呈现您的品种特定详细信息。您控制应该在哪里渲染的方式可以在您各自的“renderTemplate”钩子中指定，如下所示：

        App.BreedRoute = Ember.Route.extend({
          .....

          renderTemplate: function() {
            this.render({'into':'animals', 'outlet':'details'});
          }
        });

这基本上是说，无论你从“品种”路线中得到什么输出，都应该渲染到“细节”出口，你可以在“动物”路线中找到它。

这里有一个 jsbin 给你一个想法：http://emberjs.jsbin.com/bugexa/1/

单击品种列表以在屏幕右侧显示详细信息。希望这会有所帮助。

【讨论】：