我有一个名为' 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中的组件视图中是否存在标准化模板渲染方法?
答案 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组件类似,具有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在其答案中指出的那样)。
请参阅以下示例,了解如何传递context =&gt; component =&gt;模板http://emberjs.jsbin.com/baminu/2/edit