Question

我的网站上有一个页面，我们可以将其称为动物＆＃34;，它分为两部分 - 左边是菜单，右边是面板内容。左侧菜单有两个标签; ＆＃34;猫＆＃34;和＃34;狗＆＃34;，每个都有一系列品种。

所以，如果我去/ animals / dogs / beagle，我想看看狗的标签打开了比格犬＆＃39;选中并在右侧面板中显示有关小猎犬的信息。

我的问题是我的模板的物理层次结构并不真正遵循我的路由层次结构，因为/ animals路由实际上是整个屏幕，包括右边的面板和左边菜单周围的一些功能（允许它被隐藏等）。动物路线（/ cats或/ dogs）是在左侧菜单中{{outlet}}内呈现的模板，但因为我想要渲染的品种信息并不位于该区域内。资＆＃34;通过它上面的模板（在左边的菜单中）我真的不知道如何将它带到它应该的位置（这可能是顶部的第二个{{outlet}} - 水平/动物模板？）。

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

这里有一些ASCII艺术：）

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

Answer 1

您正在寻找的是名为outlet。更多相关信息：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>

并且您将在名为＆＃34;详细信息＆＃34;的插座中呈现您的品种特定细节。你可以在＆＃34; renderTemplate＆＃34;中指定的方式控制应该渲染的内容。挂钩你的各自，像这样：

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

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

基本上说，无论你从'品种'中得到什么样的产品。路线应该被渲染成细节＆＃39;您可以在“动物”中找到的出口。路线。

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

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

Ember：如何渲染父路线/模板中的插座？

1 个答案: