包裹内容 编辑页面


英文原文:http://emberjs.com/guides/components/wrapping-content-in-a-component/

有时候,可能需要定义一个组件来包裹其他模板提供的内容。

例如,假设正在创建一个用于显示一篇博客的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}}

JS Bin

(关于如何传递属性给组件,请参看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}} 

JS Bin

这里需要注意的时,在组件块中的作用域与模板的作用域与外部模板的作用域是相同的。如果一个属性在组件外部的模板有效,那么其在组件块内部也有效。

下面的JSBin展示了这个概念:

JS Bin