Ember.js - 如何在组件视图中呈现默认插座

Question

我在 /app/templates/components/box-modal.js 中有一个名为“box-modal.js”的重用组件视图。 它包含一个我想在其中呈现默认模板的插座。

<div>
  {{outlet main}}
</div>

我想在插座中默认呈现的模板位于 /app/templates/default_box.hbs

我知道您可以在路由器文件中为常规模板使用 renderTemplate 函数，但它不适用于组件模板：

/app/routes/components/box-modal.js

import Ember from "ember";

var BoxModalRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('default_box', {
      into: 'components.box-modal',
      outlet: 'main'
    });
}
export default BoxModalRoute;

Ember-cli 的组件视图中是否有标准化的模板渲染方式？

Answer 1

组件在您的应用程序中应该是一个孤立的事物，因此理想情况下它不应具有访问权限或依赖于外部事物。

你可以做的是使用你的组件来包装模板。

<div class="modal-component">
  {{yield}}
</div>

然后将你的模板包装在组件中。

{{#box-modal}}
  {{partial "default_box"}}
{{/box-modal}}

要用作部分模板名称，您的模板名称应以下划线开头/app/templates/_default_box.hbs

会生成

<div class="modal-component">
  <whatever is in /app/templates/_default_box.hbs />
</div>

Answer 2

组件扩展了视图，因此类似于视图组件具有layoutName 和templateName 属性。您可以使用这些属性来指定如何显示您的模板。官方说明见here。

因此，例如，您的组件可以如下所示：

App.BoxModalComponent = Ember.Component.extend({
  layoutName: "box_modal",
  templateName: "box_modal_template"
});

您的布局和模板如下所示：

  <script type="text/x-handlebars" id="box_modal">
    <h2>Box Modal</h2>

    {{ yield }}
  </script>

 <script type="text/x-handlebars" id="box_modal_template">
  <h4>Inside Box Modal</h4>
 </script>

工作演示here

更新

此外，如果您使用的模板期望呈现一些上下文，则需要将上下文传递到组件中，因为组件与您的路由/控制器隔离（正如 @Asgaroth 在他的回答中指出的那样）。

如何传递上下文 => 组件 => 模板http://emberjs.jsbin.com/baminu/2/edit见下面的例子