- Building Single:page Web Apps with Meteor
- Fabian Vogelsteller
- 364字
- 2021-08-06 19:29:38
Block helpers
Block helpers are templates that wrap the content of the block. They can be used to show content in different ways depending on conditions, or they can be used to add extra functionality to the blocks content, for example, some JavaScript calculation on its DOM elements.
In the following example, we will build a simple block helper that will show content based on a Boolean condition.
To do this, we will to add the following code snippet at the end of our example.html
file:
<template name="blockHelperExample"> <div> <h1>My Block Helper</h1> {{#if this}} <p>Content goes here: {{> Template.contentBlock}}</p> {{else}} <p>Else content here: {{> Template.elseBlock}}</p> {{/if}} </div> </template>
The {{> Template.contentBlock}}
is a predefined placeholder for the block's content. The same applies for {{> Template.elseBlock}}
.
When this
(in this example, we use the template's context as a simple Boolean) is true
, it will show the given Template.contentBlock
. Otherwise, it will show the Template.elseBlock
content.
To see how we can use the recently created template as a block helper, take a look at the following example, which we can add to home
template:
{{#blockHelperExample true}} <span>Some Content</span> {{else}} <span>Some Warning</span> {{/blockHelperExample}}
Now we should see the following screenshot:

When we now change true
, which we pass to {{#blockHelperExample}}
, to false
, we should see the content after the {{else}}
instead.
We can also use a helper function to replace the Boolean value, so that we can switch the block helper dynamically. Additionally, we can pass key-value arguments and access them by their key inside the block helper template, as shown in the following code example:
{{#blockHelperExample myValue=true}} ... {{/blockHelperExample}}
We can also access the given argument by its name in the block template as follows:
<template name="blockHelperExample">
<div>
<h1>My Block Helper</h1>
{{#if myValue}}
...
{{/if}}
</div>
</template>
Block helpers are a powerful tool because they allow us to write self-contained components that, when packed into a package, can be used as a drop-in-place functionality by others. This feature has the potential to allow for a vibrant marketplace, like the marketplace we see in jQuery plugins.
- 玩轉(zhuǎn)Scratch少兒趣味編程
- 企業(yè)級Java EE架構(gòu)設(shè)計精深實踐
- 數(shù)據(jù)庫原理及應(yīng)用(Access版)第3版
- 程序員數(shù)學(xué):用Python學(xué)透線性代數(shù)和微積分
- Python王者歸來
- SharePoint Development with the SharePoint Framework
- Getting Started with Gulp
- C語言程序設(shè)計
- Arduino家居安全系統(tǒng)構(gòu)建實戰(zhàn)
- IBM Cognos Business Intelligence 10.1 Dashboarding cookbook
- 從零開始:UI圖標(biāo)設(shè)計與制作(第3版)
- Oracle實用教程
- OpenCV Android Programming By Example
- 深度實踐KVM:核心技術(shù)、管理運維、性能優(yōu)化與項目實施
- After Effects CC案例設(shè)計與經(jīng)典插件(視頻教學(xué)版)