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内部和外部同样。若是一个属性在组件的外部可用，在组件块内部也是可用的。