我平时网站开发使用 Meteor,而前端则使用了以前被其推荐的 Blaze,不过开发是我的副业,搞得也是马马虎虎,加上 Blaze 的资料基本都是英文,所以,用起来也是一知半解。
今天又想学习一下 Blaze,所以就去读它的文档,发现 Custom Block Helpers 相关内容,看了半天,不明白为什么需要一个 Custom Block Helpers,搁以前我可能会跳过去,不过这次想「与其看一堆自己已经知道的东西,不如弄懂一个自己不懂的东西」,所以就开始研究。
在网上搜了半天,终于找到一篇文章,让我茅塞顿开。为了让自己加深记忆,在自己博客上写一遍。
为什么要用 Custom Block Helpers
要理解 Custom Block Helpers,你需要先理解 template。
template 就像一个明信片,你可以买长的完全一样的明信片,然后写上不同朋友的姓名和祝福,就会给不同朋友以各自的祝福。
和 Custom Block Helpers 的区别在于,template 是商店已经提供好的,大家都能买到,都能随便拿来用,很普遍,但是缺少一些特别的东西。
而 Custom Block Helpers 就是先自己按照自己的需要去定制一种明信片,比如我为自己的室友寄明信片,所以我在明信片中画上了大家的毕业合照,这是我自己设计和制作的,其他人都没有。我一次做很多张相同的明信片,然后,给每个室友发明信片的时候,就拿出来一张来往里面填上特定的祝福。
这种方式让我既免去了每次写明信片都要往上面画毕业合照的麻烦,又不失独特性,让我可以每次都可以写上不同的内容。
回到技术,Blaze 的 Spacebars 已经提供了 {{#each...in}}
、{{#if...else}}
等来制作自己的 template,同时也提供了 {{> myTemplate}}
来直接调用自己的 template。但是,如果我要做好几个长得有点像,但还有点区别的 template,就很麻烦,因为,我要每次都需要重复写一遍那些相同的部分。为了避免这种重复,Blaze 提供了 Custom Block Helpers。
如何使用 Custom Block Helpers
下面来举个例子:
{{! template,我们自己制作的明信片 }}
<template name="note">
<div class="note">
{{> Template.contentBlock}} {{! 可以在这里填写自定义内容 }}
</div>
</template>
这个 note
就是我们自己做的明信片(template),现在,我们需要使用它:
{{! 引用,使用我们自己的明信片,往里面填上自己的东西 }}
{{#note}}
<p> Any content here </p> {{!-- {{#note }}后面的内容将自动填写进 {{> Template.contentBlock}} --}}
{{/note}}
这样我们就直接引用了 note
,其中 {{#note}}
和 {{/note}}
中间的部分,直接对应到 template 中的 {{> Template.contentBlock}}
,引用后的结果就是:
<div class="note">
<p> Any content here </p>
</div>
如果明白了以上内容,我们继续学习。
Blaze 除了提供 {{> Template.contentBlock}}
,还提供了 {{> Template.elseBlock}}
来填如其他内容。这么说可能不太好理解,我从 blog Custom Block Helpers and Meteor Composability 看到了一个很好的例子:
<template name="myTemplate">
{{#if this}}
<h1>{{title}}</h1>
<div>
{{> Template.contentBlock}}
</div>
{{else}}
<h1>No content provided</h1>
<div>
{{#if Template.elseBlock}}
{{> Template.elseBlock}}
{{else}}
<p>No elseBlock provided</p>
{{/if}}
</div>
{{/if}}
</template>
<body>
{{#myTemplate title="My Title"}}
<p>My custom content</p>
{{else}}
<p>This is my else block</p> {{!-- 这里将填充进 {{> Template.elseBlock}} --}}
{{/myTemplate}}
</body>
这时候,我们回头来看看 Blaze 提供的例子,使用{{#if}}
来实现{{#unless}}
:
<template name="unless">
{{#if this}}
{{> Template.elseBlock}}
{{else}}
{{> Template.contentBlock}}
{{/if}}
</template>
以上,就是 Custom Block Helpers 的作用和使用方式。