const miTem = require('./mitem');
const template = miTem.compile('{{ foo }}');
let output = template({ foo: 'bar' });
console.log(output);
output = template({ foo: 'baz' });
console.log(output);
Hello {{name}}
Data:
{"name": "world!"}
Output:
Filters are used to modify variables
Hello {{name|default('world')}}
Data:
{}
Output:
It's also possible to use object methods as filter
Hello {{name|toUpperCase}}
Data:
{"name": "world"}
Output:
Of course several filters can be applied to the same variable
{{ arr | join(',') | toUpperCase }}
Data:
{
"arr": [
"qw",
"er"
]
}
Output:
To use custom filter we need to register it
miTem.filters["prefix"] = function(pref) {
return pref + "_" + this;
}
Template:
{{str | prefix('asd')}}
Data:
{"str": "qwerty"}
Output:
'this' will be pointed to current value in filter function
Let's try format date using moment.js
const moment = require('moment');
miTem.filters["moment_from_string"] = function(inputFormat) {
return moment(this, inputFormat);
}
Template:
Date: {{ date_str | moment_from_string('YYYY-MM-DD') | subtract(6, 'days') | format('MMM Do YY, dddd') }}
Data:
{"date_str": "2019-03-18"}
Output:
What happened here: first we've created custom filter 'moment_from_str' that just parse string in specific format and return 'moment' object. Than we can use any moment methods as additional filters.
Filter | Description |
---|---|
default |
Returns the passed default value if the value is undefined |
abs |
The abs filter returns the absolute value |
capitalize |
The capitalize filter capitalizes a value. |
nl2br |
Replace newlines with <br /> tag |
title |
The title filter returns a titlecased version of the value. Words will start with uppercase letters, all remaining characters are lowercase |
{% if condition %} condition true {% else %} condition false {% endif %}
Data:
{"condition": true}
Output:
It's also possible to use {% else if %} tag
{% if cnd_1 %}
cnd_1 true
{% else if cnd_2 %}
cnd_1 false, but cnd_2 true
{% else %}
cnd_1 and cnd_2 false
{% endif %}
Data:
{"cnd_1": false, "cnd_2": true}
Output:
{% for item in arr %} {{item.foo}} {% endfor %}
Data:
{
"arr": [
{"foo":"test"},
{"foo":"test2"}
]
}
Output:
It's also possible to iterate true object properties
{% for item in arr %}key:{{loop.key}}; value:{{item}}; \n{% endfor %}
Data:
{
"arr": {
"a": 1,
"b": 2
}
}
Output:
As you can see there is new variable 'loop' inside FOR loop. This is a special variable to access some special data
Variable | Description |
---|---|
loop.index |
The current iteration of the loop. (1 indexed) |
loop.index0 |
The current iteration of the loop. (0 indexed) |
loop.revindex |
The number of iterations from the end of the loop (1 indexed) |
loop.revindex0 |
The number of iterations from the end of the loop (0 indexed) |
loop.first |
True if first iteration |
loop.last |
True if last iteration |
loop.length |
The number of items in the sequence |
loop.parent |
The parent context |
loop.key |
The key of object property (in case of array equal to loop.index0) |
To use partial we need to register it
const partial = miTem.compile("hello {{who}}");
miTem.registerPartial("hello", partial);
Template:
{% for item in arr %} {% partial hello item %} {% endfor %}
Data:
{
"arr":[
{"who": "test"},
{"who": "test2"}
]
}
Output:
MIT license