t+
Tiny, terse templates. Based on t
.
Inheritance, macros, basic conditional and iteration logic.
Usage
var template = '<div id="{{=id}}">{{=content}}</div>'; template;
Syntax
Variable interpolation
- As-is:
{{=variable}}
- HTML-safe:
{{%variable}}
Conditionals
- If:
{{variable}}it exists!{{/variable}}
- If-not:
{{!variable}}it doesn't exist!{{/variable}}
- If-else:
{{variable}}
it exists!
{{:variable}}
it doesn't exist!
{{/variable}}
Enumeration
- Objects:
{{@object}}{{=key}}{{=val}}{{/object}}
- Arrays:
{{@list}}{{=i}}{{=n}}{{=val}}{{/list}}
i
is the indexn
isi + 1
(for numbering)val
is the item
Scoped evaluation
- Object - takes the argument and uses it as base context:
var template = '{{>obj}}{{=prop1}}{{=prop2}}{{/obj}}'; // Sample datatemplate;
- Array - takes the argument and uses each item as base context:
var template = '{{>objList}}{{=prop1}}{{=prop2}}{{/objList}}'; template;
Inheritance
- Inline includes (rendered in parent context):
{{+includedTemplate}}
- Named blocks with default content:
{{#block1}}content{{/block1}}
- Extending a template & overriding blocks
in layout/main
:
{{^layout/base}}
{{#main}}
{{#header}}{{/header}}
{{#content}}
default content
{{/content}}
{{#footer}}{{/footer}}
{{/main}}
in index
:
{{^layout/main}}
{{#header}}<nav></nav>{{/header}}
{{#content}}I will be seen!{{/content}}
- Included and extended templates must be registered first:
t;t; // Can also pass source string to auto-instantiatet;
Macros
- Expression:
{{macroName(arg1, "a string")}}
- Block, with default content:
{{macroName()}}
I'm default content
{{/macroName}}
- Arguments, unless strings, are evaluated against current scope
- Macros must be registered by name first:
t;
Whitespace and newline agnostic
- These are the same:
{{=id}}
,{{= id }}
,{{ =id }}
- So are these:
{{check}}yep!{{:check}}nope!{{/check}}
,
{{check}}
yep!
{{:check}}
nope!
{{/check}}
why?
No good reason, really. I've been using it forever & finally decided to push a friendly version. It's pretty fast, though.
¯\_(ツ)_/¯