ember.js中Component模板使用中的yield as-唐霜

在ember.js文档的Wrapping Content in 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。a Component和Using Block Params两节中，在文档里面出现了这样一段模板代码未经授权，禁止复制转载。【作者：唐霜】：

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。原创内容，盗版必究。

{{#blog-post editStyle="markdown" as |post|}}
  <p class="author">by {{author}}</p>
  {{post.body}}
{{/blog-post}}

当我看到as |post|的时候就懵圈儿【原创不易，请尊重版权】【原创内容，转载请注明出处】了。在前面的文档中有{{#each model as |item|}}{{/each}}的用法，但是此处的as |post|显然【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。是和each遍历不同的。花了一些时间，把【本文受版权保护】本文版权归作者所有，未经授权不得转载。这个问题搞清楚了。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua原创内容，盗版必究。【转载请注明来源】ngnet】未经授权，禁止复制转载。

三种不同的调用演示

我们创建test的router、cont【版权所有，侵权必究】原创内容，盗版必究。roller、template，以及创建【作者：唐霜】本文作者：唐霜，转载请注明出处。一个post-info组件。然后，我们在【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】app/controllers/test本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】.js中写入如下代码：

未经授权，禁止复制转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

import Ember from 'ember';

export default Ember.Controller.extend({
  title : 'title name',
  body : 'this is my test body',
  author : 'Author'
  postData : {
    title : 'the title in sub',
    body : 'body not the large',
    author : 'contributor'
  }
});

这里我们准备好了预设数据，将会在模板、组转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】件模板中进行调用作为演示。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua【未经授权禁止转载】【作者：唐霜】ngnet】【原创不易，请尊重版权】

1 直接调用controller中的数据

我们先使用yield直接输出，在app/未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。templates/components【本文受版权保护】原创内容，盗版必究。/post-info.hbs中加入如下代【本文受版权保护】【本文首发于唐霜的博客】码：

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

{{yield}}

就这样一个短短的代码就可以了。接下来在a本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netpp/templates/test.hb转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】s中如下写入：

<h1>TEST</h1>

{{#post-info}}
<article>
 <h2>{{title}}</h2>
 <p>{{body}}</p></article>
{{/post-info}}

然后我们运行ember，可以看到，{{p【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ost-info}}区块的内容被展示出来著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。。而且区块内容中的{{title}}{{【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。body}}均使用controller中本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】的数据。我们把post-info.hbs原创内容，盗版必究。本文作者：唐霜，转载请注明出处。改为如下：

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

<div>before yield</div>
{{yield}}
<div>after yield</div>

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua原创内容，盗版必究。【本文首发于唐霜的博客】ngnet】本文版权归作者所有，未经授权不得转载。

<h1>TEST</h1>

<div>before yield</div>
<article>
  <h2>title name</h2>
  <p>this is my test body</p>
</article>
<div>after yield</div>

由此我们得出结论：

【作者：唐霜】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【作者：唐霜】

主模板中的区块内容将被放在组件模板的{{原创内容，盗版必究。【版权所有，侵权必究】yield}}位置（这一规则在下面的所有【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】情况中也有效）。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【原创内容，转载请注明出处】【原创不易，请尊重版权】
在未做任何yield预设的情况下，区块中【本文首发于唐霜的博客】【转载请注明来源】的变量由主模板决定。
本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。et 获取更多精彩内容】原创内容，盗版必究。

【转载请注明来源】【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。【本文受版权保护】et 获取更多精彩内容】

2 在yield中使用传入的数据

我们把post-info.hbs修改为：

【本文受版权保护】未经授权，禁止复制转载。

{{yield post.title post.body}}

把test.hbs修改为：

<h1>TEST</h1>

{{#post-info post=postData as |title body|}}
<article>
 <h2>{{title}}</h2>
 <p>{{body}}</p>
</article>
{{/post-info}}

这个时候再看返回的结果，就会发现原本ti本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】tle和body发生了变化，变为我们在c【本文受版权保护】【作者：唐霜】ontroller中给的postData未经授权，禁止复制转载。【本文首发于唐霜的博客】的值。

【作者：唐霜】【原创不易，请尊重版权】

这样看的效果并不明显，我们把test.h转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。bs改为：

<h1>TEST</h1>

{{#post-info post=postData as |test1 test2|}}
<article>
 <h2>{{test1}}</h2>
 <p>{{test2}}</p>
</article>
{{/post-info}}

这个时候你就应该发现规律了，test1是本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】postData.title的值，tes【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。t2是postData.body的值。我未经授权，禁止复制转载。原创内容，盗版必究。们得出结论：

【本文受版权保护】【转载请注明来源】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

{{yield param1 param【未经授权禁止转载】本文作者：唐霜，转载请注明出处。2 …}}中的param被作【本文首发于唐霜的博客】【原创内容，转载请注明出处】为as |output1 output2【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】 …|中的output。（注意，我们这里将postData通过p本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ost传入到了组件模板中，所以组件模板中【本文受版权保护】【本文受版权保护】的post实际上是被传入的postDat【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.neta的数据。）
转载请注明出处：www.tangshua原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ng.net未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ng.net

看了一下文档，这种声明还可以按照下面这种未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net形式进行：

【原创不易，请尊重版权】【本文首发于唐霜的博客】【原创内容，转载请注明出处】

{{#if hasBlock}}
  {{yield post.title}}
  {{yield post.body}}
  {{yield post.author}}
{{else}}
  <h2>{{post.title}}</h2>
  <p class="author">Authored by {{post.author}}</p>
  <p>{{post.body}}</p>
{{/if}}

使用多个{{yield}}其实等同于使用【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net一个{{yield}}，它的变量顺序是一【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net样的。但是这种组件模板可以更好的根据主模著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。板中是否是以块级的形式调用。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

3 使用hash声明

我们接下来继续修改post-info.h【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】bs为：

{{yield (hash title='just title for fun' body='this body is for fun')}}

把test.hbs修改为：

本文版权归作者所有，未经授权不得转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

<h1>TEST</h1>

{{#post-info as |post|}}
<article>
  <p>{{post.title}}</p>
  <p>{{post.body}}</p>
</article>
{{/post-info}}

再来看下运行结果。发现主模板中的|pos【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nett|被代入到主模板中的区块内容中，成为一转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net个变量，而它还有title和body两个【作者：唐霜】【转载请注明来源】属性，都能输出我们想要的值。

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshua原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】

{{yield (hash title=post.title body=post.body) post.author}}

把test.hbs改为：

<h1>TEST</h1>

{{#post-info post=postData as |post author|}}
<article>
  <p>{{title}}</p>
  <p><small>{{author}}</small></p>
  <p>{{body}}</p>
</article>

<article>
  <p>{{postData.title}}</p>
  <p><small>{{postData.author}}</small></p>
  <p>{{postData.body}}</p>
</article>
<article>
  <p>{{post.title}}</p>
  <p><small>{{author}}</small></p>
  <p>{{post.body}}</p>
</article>
{{/post-info}}

运行查看结果，上面的三个article标著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】签中，第一个article标签模拟使用c未经授权，禁止复制转载。【原创内容，转载请注明出处】ontroller中的值，第二个arti未经授权，禁止复制转载。【转载请注明来源】cle标签中模拟使用controller本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】中的postData的属性来进行调用，第【原创内容，转载请注明出处】【版权所有，侵权必究】三个article则模拟使用as |po转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。st author|中的变量。有一点需要注意，就是第一个article原创内容，盗版必究。【版权所有，侵权必究】中的{{author}}实际上已经被as著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】后的author覆盖了，所以显示的时候不【本文受版权保护】本文作者：唐霜，转载请注明出处。会是Author，而是contribut【未经授权禁止转载】转载请注明出处：www.tangshuang.netor。

而实际上，使用hash声明的时候，yie【本文首发于唐霜的博客】【原创不易，请尊重版权】ld的变量仍然遵循上面第2点中的规则，就【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。是yield后面传入多少个变量，在as后原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net面就可以声明多少个变量，括号的作用是把这个括号当作一个变量来对待【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。，hash的作用是将括号所代表的变量添加【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】属性。

由此，我们得出这样的结论：

【作者：唐霜】著作权归作者所有，禁止商业用途转载。

yield中可以使用hash对某个预定义【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net变量进行属性规则规定。
【本文首发于唐霜的博客】【本文受版权保护】

未经授权，禁止复制转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

{{yield post=post author='IamAuthor'}}

本文中的这个知识点涉及到一个“闭包”的概念，当然这里不是意义上的闭包，但是【作者：唐霜】转载请注明出处：www.tangshuang.net了解闭包概念，在此处的理解上会容易一些。

未经授权，禁止复制转载。未经授权，禁止复制转载。【本文受版权保护】

在主模板和组件模板之间，存在相互传值的过【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】程，这也就改变了原来ember的模板变量本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】值的来源，在原始的ember模板变量赋值【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net过程中，需要借助controllers或【本文受版权保护】原创内容，盗版必究。组件来完成，也可以像行内调用的方式，实现【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。传值。但是当采用我们本文讨论的方法之后，【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。组件的模板中可以预先设定好一些值，反传给原创内容，盗版必究。【未经授权禁止转载】主模板，这就突破了原始的ember模板变著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net量值的来源。

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【转载请注明来源】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【版权所有，侵权必究】【本文受版权保护】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【转载请注明来源】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【本文首发于唐霜的博客】

2016-05-26 6589

唐霜

ember.js中Component模板使用中的yield as

三种不同的调用演示

1 直接调用controller中的数据

2 在yield中使用传入的数据

3 使用hash声明

为价值买单，打赏一杯咖啡

声明

关于

生态