发布于 2015-08-18 16:33:22 | 520 次阅读 | 评论: 0 | 来源: 网络整理
有时候，可能需要定义一个组件来包裹其他模板提供的内容。
例如，假设正在创建一个用于显示一篇博客的blog-post组件：
1 2 3 4 |
<script type="text/x-handlebars" id="components/blog-post">
<h1>{{title}}</h1>
<div class="body">{{body}}</div>
</script>
|
现在可以使用{{blog-post}}组件并且传递其他模板的属性到该组件：
1 |
{{blog-post title=title body=body}}
|
（关于如何传递属性给组件，请参看Passing Properties to a Component）
在本例中，用于显示的内容来源于模型。那么如果开发者想使用该组件来提供自定义的HTML内容该怎么做呢？
在已经描述的简单形式之外，组件还支持使用块的方式。在块方式下，可以传递一个Handlebars模板给组件，该模板将在组件模板中声明{{yield}}表达式的地方显示。
为了使用块方式，需要在使用组件的时候，在组名前加上#，并确定添加了结束标签。（详细内容参见模板文档中的块表达式）。
在这种情况下，可以使用{{blog-post}}组件的块方式，并使用{{yield}}助手告知Ember块内容将被渲染到什么地方。为了更新上面的例子，首先需要修改组件的模板为：
1 2 3 4 |
<script type="text/x-handlebars" id="components/blog-post">
<h1>{{title}}</h1>
<div class="body">{{yield}}</div>
</script>
|
由此可见，{{body}}被替换为{{yield}}。这告知Ember这里的内容会在组件使用的时候提供。
接下来，更新使用组件的模板采用块方式：
1 2 3 4 |
{{#blog-post title=title}}
<p class="author">by {{author}}</p>
{{body}}
{{/blog-post}}
|
这里需要注意的时，在组件块中的作用域与模板的作用域与外部模板的作用域是相同的。如果一个属性在组件外部的模板有效，那么其在组件块内部也有效。
下面的JSBin展示了这个概念：