入门指南 获取Ember 概念 对象模型 应用 模板 路由 组件 控制器 模型 视图 枚举 测式 配置Ember.js COOKBOOK 理解Ember.js

发布于 2015-08-18 16:33:22 | 484 次阅读 | 评论: 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}}
 

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

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务