Ember.js - 如何在组件 View 中渲染默认导出

Question

我在 /app/templates/components/box-modal.js 中有一个名为“box-modal.js”的重用组件 View 。它包含一个 socket ，我想在其中渲染默认模板。

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

我想要在 socket 中默认渲染的模板位于 /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 中的组件 View 中的模板渲染是否有标准化的方法？

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>