在ember.js文档的Wrapping Content in 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】a Component和Using Block Params两节中，在文档里面出现了这样一段模板代码原创内容，盗版必究。原创内容，盗版必究。：
转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】{{#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|显然本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net是和each遍历不同的。花了一些时间，把【版权所有，侵权必究】原创内容，盗版必究。这个问题搞清楚了。
yield的意思就是“传给”的意思，只要【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net在使用{{#}}{{/}}这种块级形式的【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】组件标签时，才使用。我们通过三个演示来说未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】明。
著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】三种不同的调用演示
我们创建test的router、cont本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】roller、template，以及创建【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】一个post-info组件。然后，我们在【转载请注明来源】【作者：唐霜】app/controllers/test著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】.js中写入如下代码：
【作者：唐霜】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netimport 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著作权归作者所有，禁止商业用途转载。件模板中进行调用作为演示。
【转载请注明来源】【转载请注明来源】【本文受版权保护】【本文受版权保护】1 直接调用controller中的数据
我们先使用yield直接输出，在app/【未经授权禁止转载】【未经授权禁止转载】templates/components未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】/post-info.hbs中加入如下代原创内容，盗版必究。【本文受版权保护】码：
【未经授权禁止转载】【转载请注明来源】【本文首发于唐霜的博客】{{yield}}
就这样一个短短的代码就可以了。接下来在a【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netpp/templates/test.hb【原创内容，转载请注明出处】【本文受版权保护】s中如下写入：
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。<h1>TEST</h1>
{{#post-info}}
<article>
<h2>{{title}}</h2>
<p>{{body}}</p></article>
{{/post-info}}
然后我们运行ember，可以看到，{{p转载请注明出处：www.tangshuang.net【转载请注明来源】ost-info}}区块的内容被展示出来本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】。而且区块内容中的{{title}}{{【原创不易，请尊重版权】【原创不易，请尊重版权】body}}均使用controller中【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】的数据。我们把post-info.hbs未经授权，禁止复制转载。未经授权，禁止复制转载。改为如下：
【原创不易，请尊重版权】【作者：唐霜】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。<div>before yield</div>
{{yield}}
<div>after yield</div>
运行之后，我们发现区块内容被放在{{yi本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。eld}}的位置。最终构造出来的HTML【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net是：
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。转载请注明出处：www.tangshuang.net【转载请注明来源】<h1>TEST</h1> <div>before yield</div> <article> <h2>title name</h2> <p>this is my test body</p> </article> <div>after yield</div>
由此我们得出结论：
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- 主模板中的区块内容将被放在组件模板的{{转载请注明出处：www.tangshuang.net【版权所有，侵权必究】yield}}位置（这一规则在下面的所有著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。情况中也有效）。
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【本文受版权保护】- 在未做任何yield预设的情况下，区块中【版权所有】唐霜 www.tangshuang.net【转载请注明来源】的变量由主模板决定。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【本文受版权保护】
2 在yield中使用传入的数据
我们把post-info.hbs修改为：
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【本文受版权保护】{{yield post.title post.body}}
把test.hbs修改为：
转载请注明出处：www.tangshuang.net【未经授权禁止转载】【未经授权禁止转载】<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【关注微信公众号：wwwtangshuangnet】【本文受版权保护】bs改为：
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【转载请注明来源】【本文首发于唐霜的博客】<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【版权所有，侵权必究】【作者：唐霜】 …|中的output。（注意，我们这里将postData通过p【本文首发于唐霜的博客】未经授权，禁止复制转载。ost传入到了组件模板中，所以组件模板中本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】的post实际上是被传入的postDat【版权所有】唐霜 www.tangshuang.net【作者：唐霜】a的数据。）
【版权所有】唐霜 www.tangshuang.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}}其实等同于使用【本文首发于唐霜的博客】【转载请注明来源】一个{{yield}}，它的变量顺序是一【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】样的。但是这种组件模板可以更好的根据主模【本文受版权保护】未经授权，禁止复制转载。板中是否是以块级的形式调用。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【未经授权禁止转载】3 使用hash声明
我们接下来继续修改post-info.h【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】bs为：
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。{{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本文版权归作者所有，未经授权不得转载。t|被代入到主模板中的区块内容中，成为一本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】个变量，而它还有title和body两个【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。属性，都能输出我们想要的值。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】我们在来混合使用一下，把post-inf【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】o.hbs改为：
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。{{yield (hash title=post.title body=post.body) post.author}}
把test.hbs改为：
著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【本文受版权保护】著作权归作者所有，禁止商业用途转载。<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标【转载请注明来源】【版权所有】唐霜 www.tangshuang.net签中，第一个article标签模拟使用c本文版权归作者所有，未经授权不得转载。【作者：唐霜】ontroller中的值，第二个arti【作者：唐霜】本文版权归作者所有，未经授权不得转载。cle标签中模拟使用controller【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。中的postData的属性来进行调用，第【本文受版权保护】【原创不易，请尊重版权】三个article则模拟使用as |po本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】st author|中的变量。有一点需要注意，就是第一个article【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net中的{{author}}实际上已经被as本文作者：唐霜，转载请注明出处。【作者：唐霜】后的author覆盖了，所以显示的时候不【作者：唐霜】【关注微信公众号：wwwtangshuangnet】会是Author，而是contribut【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。or。
【原创不易，请尊重版权】未经授权，禁止复制转载。【原创不易，请尊重版权】而实际上，使用hash声明的时候，yie【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netld的变量仍然遵循上面第2点中的规则，就【转载请注明来源】【版权所有】唐霜 www.tangshuang.net是yield后面传入多少个变量，在as后【版权所有】唐霜 www.tangshuang.net【转载请注明来源】面就可以声明多少个变量，括号的作用是把这个括号当作一个变量来对待【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】，hash的作用是将括号所代表的变量添加【关注微信公众号：wwwtangshuangnet】【转载请注明来源】属性。
【原创内容，转载请注明出处】【作者：唐霜】未经授权，禁止复制转载。由此，我们得出这样的结论：
未经授权，禁止复制转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。yield中可以使用hash对某个预定义转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net变量进行属性规则规定。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net
遗留问题，是否能如下使用yield（带=【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】赋值）：
【原创内容，转载请注明出处】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net{{yield post=post author='IamAuthor'}}
本文中的这个知识点涉及到一个“闭包”的概念，当然这里不是意义上的闭包，但是【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。了解闭包概念，在此处的理解上会容易一些。
【转载请注明来源】【转载请注明来源】本文作者：唐霜，转载请注明出处。【作者：唐霜】在主模板和组件模板之间，存在相互传值的过【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】程，这也就改变了原来ember的模板变量【本文受版权保护】【原创内容，转载请注明出处】值的来源，在原始的ember模板变量赋值【作者：唐霜】著作权归作者所有，禁止商业用途转载。过程中，需要借助controllers或【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net组件来完成，也可以像行内调用的方式，实现【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net传值。但是当采用我们本文讨论的方法之后，【本文受版权保护】转载请注明出处：www.tangshuang.net组件的模板中可以预先设定好一些值，反传给【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net主模板，这就突破了原始的ember模板变【版权所有，侵权必究】原创内容，盗版必究。量值的来源。
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】2016-05-26 7047
