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>