ember * 3.5 使用块级参数

2018-12-21  本文已影响0人  wodelu

组件可以传入属性,参见Passing Properties to a Component,但他们也能返回要在块表达式中使用的输出。

使用yield从组件返回值

//in index.hbs
{{blog-post post=model}}
//in component blog-post.hbs
{{yield post.title post.body post.author}}

在这里,整个博客文章model作为单个组件属性传递给组件。反过来,组件使用yield返回值,在这种情况下,yield需要的值从被传入的文章中获取,但是组件可以访问的任何东西都可以使用yileld方法展示,例如内部属性或者来自service的东西。

使用块级参数消耗产生的值

然后块表达式可以使用块级参数将名称绑定到任何在块中使用的yielded的值。这允许在使用组件时进行模板自定义,其中标记由使用的模板提供。但是任何保留组件中实现的任何事件处理行为,例如click ()处理程序。

//in index.hbs
{{#blog-post post=model as |title body author|}}
    <h2>{{title}}</h2>
    <p class="author">{{author}}</p>
    <p class="post-body">{{body}}</p>
{{/blog-post}}

名称按照他们在组件模板中传递给yield的顺序绑定。

在一个组件中支持块和内联组件使用

可以使用has-block帮助程序从单个组件模板组件的块和内联的使用。

// in component blog-post.hbs
{{#if (has-block)}}
    {{yield post.title post.body post.author}}
{{else}}
    <h1>{{post.title}}</h1>
    <p class="author">Author by {{post.author}}</p>
    <p>{{post.body}}</p>
{{/if}}

这具有在使用内联形式的组件时提供默认模板的效果,但是在使用块表达式时为块参数提供使用的值。

上一篇 下一篇

猜你喜欢

热点阅读