Jumplate (jumbo-template)
Jumplate is one of the fastest (faster than Jade, EJS, Handlebars, Underscore) Node.js template engine with cacheable precompilation. Jumplate is able to compile 16 000 templates in one second and render 400 000 precompiled templates in one second upon one 2,33 GHz core.
Template code is compiled to native JavaScript (can be cached), than it can be rendered with given set of data into final HTML.
JumboJS framework
Created forWriten in ES6 for Node.js. Babeled for client-side execution. Should run in most recent browsers and IE11 (older should work too but it's not guaranteed).
Usage
Example usages of Jumplate.
Basic Usage
Creating instance of Jumplate with given template code.
Layout example
Node Task Manager | JumboJS DEMO {{include head}} Node Task Manager Welcome, thanks for giving it a try {{include content}}
Partial template example
{{block content}} Homepage {{$subtitle}} {{if $user.age < 18}} {{include "../not-allowed.jshtml"}} {{/if}} {{* Declare variable inside template *}} {{var $date = new Date()}} Current time: {{$date}} {{* Log $date into browser console *}} {{debug $date}} {{for $item of $items}} {{$item.name}} (My key is: {{$itemKey}}) {{last}} and I'm the last one {{/last}} {{/for}} {{!$htmlStyledContent}} {{/block}}
Jumplate; var tpl = "<body><h1>{{$title}}</h1>{{loc Home.index.text}}</body>"; tpl;
With Layout
var template = "{{block content}}<h1>{{define title}}{{$title}} with layout{{/define}}</h1>" + "{{loc Home.index.text}}{{/block}}";var layout = "<html><head><title>Example{{defined title}} | {{use title}}{{/defined}}</title>" + "</head><body>{{include content}}</body></html>"; var tpl = template null layout;tpl;
With File Include
var template = '{{block content}}<h1>{{$title}}</h1>' + '{{loc Home.index.text}}{{include "footer.tpl"}}{{/block}}'; var tpl = template "path/to/template.tpl"; // Path is used as base dir for resolving include// and file name is used in errors to specify in which file error occurstpl;
Let Jumplate Load Templates
var tpl = null "path/to/template.tpl" null "path/to/layout.tpl"; // Path is used as base dir for resolving include// and file name is used in errors to specify in which file error occurstpl;
Use Cached Template
var tpl = Jumplate;tpl;
Ability Overview
Commands
Variables
All variables begin with $
symbol.
Each variable can be printed as {{$variable}}
. Output has escaped html entities (<, >, &, ", ').
If you want to print variable without escaping use {{!$variable}}
.
It's possible to define variable right inside
template with {{var $x = new Date().toString()}}
Block
Define block of code which is rendered in place of definition.
Can be reused by {{include blockName}}
.
Block can be included many times.
{{block blockName}}Block content. Will be rendered here{{/block}}
Define
Define is similar to block, but define will not be rendered in place of definition.
{{define defineBlockName}}Define block content{{/define}}
Both define
and block
can be checked by {{defined defineBlockName}}Block with name defineBlockName exists.{{/defined}}
.
Include
Include block (define too) or other template file.
{{include blockName}}
will include block with given name.
{{include "./path/to/template.tpl"}}
will include file with given path; relative to current file.
Cycles
There are two cycles.
{{for $x = 0; $x < $count; $x++}}For content{{/for}}
and
{{for $item of $list}}Foreach content{{/foreach}}
In case of for-of there is special variable $itemKey
which is accessible
inside cycle block and contains key of current item.
In both cycles you can use commands
{{first}}Will be rendered if this iteration is first{{/first}}
{{last}}Will be rendered if this iteration is last{{/last}}
{{even}}Will be rendered if this iteration is even{{/even}}
{{odd}}Will be rendered if this iteration is odd{{/odd}}
Conditions
{{if $x == "condition"}}
if condition true...
{{elseif $x == "else if condition"}}
if else if condition true...
{{else}}
else...
{{/if}}
Localization
You can register localization hadler to Jumplate and
than use command {{loc Key.for.requested.translation}}
which will call your handler
with given key as parameter.
var tpl = ...; // Register own handlertpl
Jumplate has static methods setLocale
and setTimeZone
to set default locale and timezone which are used in .toLocaleString for Dates eg.
Same methods exist on instance too. Those methods override the static ones.
Helpers
You can define own helpers, inline and block too. On class Jumplate
there are static methods registerHelper(name, func)
and registerBlockHelper(name, func)
.
Jumplate;
Then you can use it in template like this.
{{block menu}}
{{foreach $item in $menuItems}}
{{link($item.text, $item.url)}}
{{/foreach}}
{{/block}}
TODO
- Allow prototype function calling when printing variable eg.
{{$createdOn.format("d.m.Y")}}