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內部和外部同樣。若是一個屬性在組件的外部可用，在組件塊內部也是可用的。