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

Posted 2023-02-22

【中文标题】Ember.js - 如何在组件视图中呈现默认插座

【英文标题】：Ember.js - how to render default outlet in a component view

【发布时间】：2015-03-04 07:21:35

【问题描述】：

我在 /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 的组件视图中是否有标准化的模板渲染方式？

【问题讨论】：

只是为了检查，但您正在导出您创建的路线，export default BoxModelRoute;，对吗？您是否检查过 renderTemplate 是否被击中？

哦，是的，我做了导出。我会编辑。

【参考方案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>

【讨论】：

您能否详细说明使用我的组件包装模板是什么意思？

使用你的组件作为一个块，并把你的模板放在里面。

部分的前导下划线不再需要。见github.com/emberjs/ember.js/issues/2242 和github.com/emberjs/ember.js/pull/3017

太棒了，文档还需要更新。 emberjs.com/guides/templates/rendering-with-helpers/…

这对动作有用吗？我有一个可点击项目的列表，这些项目需要根据被点击的项目呈现部分。在这种情况下如何渲染不同的局部？

【参考方案2】：

组件扩展了视图，因此类似于视图组件具有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 在他的回答中指出的那样）。

如何传递上下文 => 组件 => 模板http://emberjs.jsbin.com/baminu/2/edit见下面的例子