Spacebars: Meteor templating
Spacebars
is an adaptation of Handlebars
templating which is used by meteor
. Since EmberJS and AngularJS use Handlebars-like templating, I was on a comfortable footing here, but after reading the hidden README.md
in the Meteor docs, I discovered some new things.
Order of resolution
Template helpers take priority over the data context when it comes to resolving references in the template:
var data = { bar: "Goodbye" }; // Will be injected
Template.foo.bar = function () { return "Hello"; }
and
<template name="foo">
{{bar}} World!
</template>
<template name="baz">
{{> foo data}}
</template>
will result in Hello World!
.
Constructing data contexts on the fly
Template data can be created on the fly while inserting a template using keyword
arguments:
{{> foo bar=data.theOtherBar }}
would pass { bar: data.theOtherBar }
as the data context to the foo
template.
However, if positional and keyword arguments are mixed, then the first positional argument will be called using the other arguments:
{{> foo bar baz=data.theOtherBar }}
will actually try to invoke bar({ baz : data.theOtherBar })
and pass the result as a data context to foo
.
Dynamic attributes
This works:
Template.foo.attrs = {
checked: "",
'data-name': "panic-code"
}
and:
<template name="foo">
<input class="danger" {{attrs}} />
</template>
However, it doesn’t merge attribute values, so we cannot build a list of classes using <input {{attrs1}} {{attrs2}} ... />
.
Block tags inside attributes
This works:
<input class="{{#if done}}done{{else}}notdone{{/if}}" />
Interchangeable functions and properties
Spacebars automatically executes functions in the template. Hence, {{foo.bar}}
could mean {{foo().bar}}
, {{foo.bar()}}
, {{foo().bar()}}
or {{foo.bar}}
depending on the values of foo
and bar
.