美文网首页
ember * 3.5 使用块级参数

ember * 3.5 使用块级参数

作者: wodelu | 来源:发表于2018-12-21 15:37 被阅读0次

组件可以传入属性,参见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}}

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

相关文章

  • ember * 3.5 使用块级参数

    组件可以传入属性,参见Passing Properties to a Component,但他们也能返回要在块表达...

  • Ember.js初体验

    创建一个新的App 要使用Ember CLI创建新项目,请使用命令:ember new projectName 其...

  • ember*3.5 处理事件

    你可以通过事件处理程序响应组件上的用户事件,如双击,鼠标悬停和按键事件。只需要将你想要响应的事件的名称实现为组件上...

  • 浮动布局

    属性float参数值 属性clear 传统布局块级元素无论大小是多少都会单独占用一行,使用浮动布局可以解决块级元素...

  • vscode块级注释

    shift+alt+a vscode块级注释@param 标记方法参数及参数类型

  • 零基础简单易用的EmberJS框架

    为什么要使用ember.js ember.js是一个JavaScript框架,它大大减少了构建任何web应用程序所...

  • ember*3.5(定义一个组件)

    为了定义一个组件,运行: ember 组件用来将标记文本和样式转换为可重用内容。组件包含两块:一个用来定义行为的J...

  • ember*3.5 自定义组件元素

    默认情况下,每个组件都有 元素支持。如果您要查看开发人员工具中的渲染组件,你会看到一个类似于一下内容的DOM表示:...

  • ember*3.5 将属性传递给组件

    组件和它们周围的环境是隔离的,所以组件需要的任何数据都需要传递进去。 例如,想象你有一个blog-post组件,用...

  • ember*3.5 在组件中包装内容

    有时你可能希望定义一个包装由其他模板提供的内容的组件。 例如,想象我们创建一个组件,名字叫blog-post,我们...

网友评论

      本文标题:ember * 3.5 使用块级参数

      本文链接:https://www.haomeiwen.com/subject/dvxnhqtx.html