技术

何为 Custom Block Helpers

Posted on 2019-10-27,5 min read

我平时网站开发使用 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 的作用和使用方式。

下一篇: 管理:一定要让团队的每个人专注地贡献智力→