Ember.js

Question

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

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

我想在 outlet 中默认渲染的模板在 /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

Component 扩展了一个 View，因此类似于 View 组件具有 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

更新

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

关于如何传递context => component => template，请看下面的例子http://emberjs.jsbin.com/baminu/2/edit

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

Ember.js - how to render default outlet in a component view

routing

components

render

ember-cli