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.