#4 为组件提供内容

来源:互联网 发布:用友软件介绍 编辑:程序博客网 时间:2024/03/29 16:23

英文原版:https://guides.emberjs.com/v2.14.0/components/wrapping-content-in-a-component/

可能在有些时候,你或许需要你的组件包裹一些在其他模版中定义的内容。

比如,假设现在你创建了一个blog-post组件,用来在应用中展示一篇博客:

app/templates/components/blog-post.hbs<h1>{{title}}</h1><div class="body">{{body}}</div>

那么现在,我们使用这个{{blog-post}}组件,并且给它传递一些属性:

{{blog-post title=title body=body}}

【在此,你可以查看上一节的内容回顾下怎么给组件传递属性。】

在这种情况下,我们想要展示的内容是从model中获取的。但是如果我们的开发人员想要通过组件展示一些定制的HTML视图那该如何??

除了之前学习的使用组件的形式之外,组件还支持以块形式来进行调用。通过块形式,可以把一个用来渲染Handlebars模版传递给组件模版中的{{yield}}助手。该助手会把接收到的Handlebars模版在它本身所在的地方渲染出来。

为了使用块形式,只需要在组件名前加一个“#“符号,并且确保添加一个组件的结束标签。

【可以阅读 block expressions来了解更多】

在块形式下,我们可以通过{{yield}}助手来告诉Ember包裹在组件内部的内容在哪里渲染。更新一下上面的模版,我们首先更改一下组件的模版:

app/templates/components/blog-post.hbs<h1>{{title}}</h1><div class="body">{{yield}}</div>

你现在可以看到,我们将{{body}}替换成了{{yield}}。这就会告诉Ember被组件包裹的内容将会渲染到{{yield}}所在的地方。

下一步,我们将通过组件的块形式来编写外层的模版:

app/templates/index.hbs{{#blog-post title=title}}  <p class="author">by {{author}}</p>  {{body}}{{/blog-post}}

这里需要注意一下,被包裹的内容所在的上下文并不是组件的上下文,而是组件被使用时所在的上下文

使用封装的内容共享组件数据

在块形式下,存在一种方式可以将组件的数据共享给它所包裹的模版。在blog post组件中,我们想要提供一个功能,使得用户可以配置他博客的类型。我们将会给他们提供一个选项用来指定是“mardown-style“还是”html-style”。

app/templates/index.hbs{{#blog-post editStyle="markdown-style"}}  <p class="author">by {{author}}</p>  {{body}}{{/blog-post}}

为了支持不同的编辑风格,将会需要不同的组件提供不同的验证和高亮显示。通过不同的编辑风格来获取不同的组件主题,你可以通过组件助手和哈希助手来完成这个目标。这里,被选中的组件被分配给了嵌套使用的hash助手,并且在模版中被渲染。【注意】:editStyle作为参数传入了component助手。

app/templates/components/blog-post.hbs<h2>{{title}}</h2><div class="body">{{yield (hash body=(component editStyle))}}</div>

一旦完成了这些设置,post变量就可以访问到这些数据了。现在,{{markdown-style}}组件将会被渲染到{{post.body}}中。

app/templates/index.hbs{{#blog-post editStyle="markdown-style" postData=myText as |post|}}  <p class="author">by {{author}}</p>  {{post.body}}{{/blog-post}}

最后,我们需要显示myText的内容。为了将博客内容传入组件,我们使用了postData参数。

app/templates/components/blog-post.hbs<h2>{{title}}</h2><div class="body">{{yield (hash body=(component editStyle postData=postData))}}</div>

在这一点上,我们的块内容已经通过blog-post组件得到了它渲染所需的一切。

另外,由于组件直到块内容渲染之后才会实例化。在这种情况下我们将会添加一个文本样式的选项用来描述主体文本的样式。当{{post.body}}被实例化时,它将同时拥有editStyle和postData,也拥有在它模版中声明的bodyStyle。

这样构建的组件我们通常称之为“上下文组件“,它会把内部组件封装在自己的上下文中。

【这里给出一个参考连接:https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_nested-usage】

本节完。

原创粉丝点击