Quick Reference
Interpolation
<ul>
<li>Basic Interpolation: {{name}}</li>
<li>Complex Interpolation {{user.name}}</li>
</ul>
Comment Statement
{{- This is an inline comment -}}
{{- This is
a multiline comment
-}}
If Statement
<p>
{{if user.isCool}}
This is cool
{{else}}
This is not cool
{{/if}}
</p>
For Statement
Inside of the for, we expose some helpers: isFirst
, isLast
, isOdd
, isEven
. Here is how to use them:
<ul>
{{for user in users}}
<li {{if user.isFirst}}class="first"{{/if}}>
Hello {{user.name}}
</li>
{{/for}}
</ul>
You can expose the index of the current iteration by following the syntax {{for element, index in collection}}
):
<ul>
{{for user, index in users}}
<li>{{index}} - Hello {{user.name}}</li>
{{/for}}
</ul>
Render Statement
<html>
<header>
{{ render "/templates/_css.beard" }}
</header>
<body>
{{ render "/templates/body.beard" personName="Dan" account=myAccount }}
</body>
{{ render "/templates/_js.beard" }}
</html>
Block Statement
Marks one fraction of the code as a block, so it can be extended.
<html>
<body>
{{block header}}
application header
{{/block}}
</body>
<html>
Yield Statement
When extending a template, the content that is not included withing a block statement will be yielded under the yield statement.
<html>
<body>
{{block header}}
application header
{{/block}}
{{yield}}
</body>
<html>
Extends Statement
Extends a template, contentFor statements overwrites the block statement with the matching name. The rest of the content not marked as contentFor will be yielded under the yield statement.
{{extends "/beard-benchmark/double-column.beard"}}
{{contentFor header}}
<nav class="top-navi">
<ul>
<li>First Link</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
</nav>
{{/contentFor}}
<p>Yielded content</p>