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

时间:2015-01-06 15:28:52

标签: ember.js routing components render ember-cli

我有一个名为' box-modal.js'的重复使用的组件视图。在 /app/templates/components/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中的组件视图中是否存在标准化模板渲染方法?

2 个答案:

答案 0 :(得分:5)

组件在应用程序中应该是一个孤立的东西,所以理想情况下它不应该具有访问权限,或者依赖于外部事物。

您可以使用组件包装模板。

<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>

答案 1 :(得分:0)

组件扩展了View,因此与View组件类似,具有layoutNametemplateName属性。您可以使用这些属性指定如何显示模板。有关官方说明,请参阅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在其答案中指出的那样)。

请参阅以下示例,了解如何传递context =&gt; component =&gt;模板http://emberjs.jsbin.com/baminu/2/edit