ember.js - 如何将多个内容生成到 ember.js 组件模板中？

Question

目标是定义一种 HTML 结构，该结构具有多个由调用者声明的内容 block 。例如，标题、正文和内容。生成的标记应该是:

<header>My header</header>
<div class="body">My body</div>
<footer>My footer</footer>

实例化组件的模板将定义三个部分中的每一个:我的页眉、我的正文和我的页脚。

使用 Ruby on Rails，您可以使用 content_for :header 从调用方捕获 header 内容，并使用 yield :header 对其进行插值。

这在 ember.js 中可能吗？

Answer 1

从 ember v1.10 开始，yield 接受参数。然而，handlebars 还不允许对变量值进行内联比较。通过在组件上定义一些属性，我们可以非常接近 Rails 的功能。

根据上面的示例，组件的模板如下所示:

<header>{{yield header}}</header>
<div class="body">{{yield body}}</div>
<footer>{{yield footer}}</footer>

组件定义会将变量参数解析为yield 语句:

export default Ember.Component.extend({
  header: {isHeader: true},
  footer: {isFooter: true},
  body:   {isBody: true}
});

这意味着 {{yield header}} 实际上为使用模板生成了一个对象 {isHeader: true}。因此我们可以使用嵌套的 if/else 结构来声明这三个部分，如下所示:

{{#my-comp as |section|}}
  {{#if section.isHeader}}
    My header
  {{else if section.isBody}}
    My body
  {{else if section.isFooter}}
    My footer
  {{/if}}
{{/my-comp}}