正文
5.4 Components -- Wrapping Content in A Component(在组件中包裹内容)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.有时候，你可能希望定义一个模板，它包裹其他模板提供的内容。
例如，假设我们创建一个blog-post模板，我们可以使用它来展现一个blog post：
app/components/blog-post.hbs
<h1>{{title}}</h1>
<div class="body">{{body}}</div>
现在，我们可以使用{{blog-post}}组件并且传递它到其他模板，作为其他模板的属性：
{{blog-post title=title body=body}}
- 在这种情况下， 我们想要展现的内容来自model。但是如果我们希望开发人员使用组件能够提供自定义的HTML内容呢？
2. 除了你目前为止学过的simple form，组件也支持被用在block form。在block form中，组件可以被传递一个Handlebars template，它被渲染进组件的模板中{{yield}}出现的地方。
3.为了使用block form，在组件名字前面添加一个#字符，然后确保添加一个封闭的标签。（详细可以查看Handlebars文档的block expressions）
4. 在那种情况下，我们可以在block form中使用{{blog-post}}组件并且通过使用{{yield}}辅助器告诉Ember块内容应该被加载在哪。更新上面的例子，我们首先改变组件模板：
app/templates/components/blog-post.hbs
<h1>{{title}}</h1>
<div class="body">{{yield}}</div>
你可以看到我们用{{yield}}替换了{{body}}。这就告诉Ember当组件被使用时内容将被提供。
下一步，我们更新使用组件的模板去使用block form：
app/templates/index.hbs
{{#blog-post title=title}}
<p class="author">by {{author}}</p>
{{body}}
{{/blog-post}}
5. 注意模板作用与在组件block内部和外部一样。如果一个属性在组件的外部可用，在组件块内部也是可用的。
