Question

我有一个主要由Ruby on Rails呈现的网站，其中几个部分使用Ember。到目前为止，我们一直在使用单独的ember应用程序来管理每个部分，但这会开始创建过多的应用程序开销。

有没有办法将Ember应用程序附加到正文（作为rootElement）并将每个部分构建为独立的组件或视图，而不必将主体包装在脚本标记中？

我们目前拥有的模块： *购物车摘要 *帐户详情＆amp;标题中的菜单 *还有其他几个

现在要求在页面的其他部分复制帐户详细信息部分。今天执行此操作的唯一方法是将帐户应用程序附加到包含两个部分的元素...但是这也会包装购物车摘要区域并导致该应用程序失败。

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

Answer 1

如果我找到你的话，你会有类似的东西（对于模式来说是http://asciiflow.com/）：

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

如果是这样，你确实有两个选择。

使用命名插座（example，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
  }
});

或者您使用组件，这在架构方面也是一个不错的（r）解决方案。

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

组件背后的哲学是它们应该是相当孤立的，所以它可能不适合你的目的（对于这部分，我不能为你知道）

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

请注意，在这两种情况下，转换都需要相当多的工作。我的第一印象是，首先转移到指定的出口更容易，然后尝试转向组件解决方案，该解决方案往往是Web Components的新标准。

Answer 2

我有一些似乎有效的原型。您将rootElement设为正文，然后使用childView.appendTo($('.some-element'));将Ember视图放在所需的位置。

您可以创建一些自动化脚本块（type="text/x-ember-view"），而不是手动执行此操作。

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

EmberJS：多个模板，一页

2 个答案: