EmberJS：多个模板，一页

Question

我有一个主要由Ruby on Rails渲染的网站，该页面的几个部分使用Ember。 到目前为止，我们一直在使用单独的余烬应用程序来管理每个部分，但这开始造成过多的多应用程序开销。

有没有一种方法可以将Ember应用程序附加到主体（作为rootElement ），并使每个部分构建为独立的组件或视图，而不必将主体包装在script标签中？

我们当前拥有的模块：*购物车摘要*标题中的帐户详细信息和菜单*其他一些

现在需要在页面的另一部分中复制“帐户详细信息”部分。 今天要做到这一点的唯一方法是将account应用程序附加到包装两个部分的元素上……但是，这也将包装购物车摘要区域并导致该应用程序失败。

理想情况下，我希望能够组合所有这些应用程序，并告诉Ember在页面上放置视图的位置。 这可能吗？

Answer 1

如果我正确地理解了您，那么您会遇到类似的情况（该模式为http://asciiflow.com/ ）：

+-index.html-------+---+--------+---------+-+
|  +------menu.html|   +---------cart.html| |
|  |   Ember App   |   |     Ember App    | |
|  |               |   |                  | |
|  +---+---------+-+   +-------+-+--------+ |
|  +----main.html--+---+-------+ |else.html |
|  |                           | |        | |
|  |                           | | Ember  | |
|  |     Ember App             | |  App   | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | |        | |
|  |                           | +--------+ |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  |                           |            |
|  +---------------------------+            |
+--+---------------------------+------------+

如果是这样，您确实有2个选择。

• 要使用命名出口（ 例如 ， documentation ），都必须将各种应用程序的每个索引移至以其功能角色或位置命名的模板。

简而言之（在主要index.html中，使用位置名称方法）：

<div class="header-left">{{outlet headerleft}}</div>
<div class="header-right">{{outlet headerright}}</div>  
<div class="sidebar">{{outlet sidebar}}</div>
<div class="main">{{outlet main}}</div>

在您的IndexRoute ：

App.IndexRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('headerleftTpl', {// the template to render
      into: 'index',              // the template to render into
      outlet: 'headerleft',       // the name of the outlet in that template
      controller: 'HeaderLeftCtrl'// the controller to use for the template
    });
    this.render('headerrightTpl', {
      into: 'index',
      outlet: 'index',
      controller: 'HeaderRightCtrl'
    });
   // And so on
  }
});

• 或者您使用组件，这在体系结构方面也是一个不错的解决方案。

但是，这需要大量重构才能将所有应用程序转换为组件。

组件背后的理念是它们应该被完全隔离，这样可能不符合您的目的（对于这一部分，我无法为您知道）

这是一个很好的教程，可以将视图转换为组件。

• 请注意，在两种情况下，都要进行大量转换。 我的第一印象是，先移至命名的出口，然后再尝试向倾向于Web组件新标准的组件解决方案移动，会更容易。

Answer 2

我已经为某些似乎可行的原型制作了东西。 您将rootElement为主体，然后使用childView.appendTo($('.some-element')); 将Ember视图放置在所需位置。

您可以创建一些自定义脚本块（ type="text/x-ember-view" ）来代替它，而无需手动进行操作。

演示： http : //emberjs.jsbin.com/motile/7/edit?html,js,output