0

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

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

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

什么是最好/正确的方法来实现这一点，而不是在我的层次结构的最低级别有效地复制整个屏幕，只是让这两个部分位于同一个模板区域内？

这是一些 ASCII 艺术 :)

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

1 回答 1

0

您正在寻找的是命名的网点。更多信息在这里：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>

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

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

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

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

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

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

于 2014-09-30T14:05:23.807 回答