leopard-template
A simple HTML template engine, currently a parser. Basically implements ejs syntax.
Examples
You can simply run the examples here with
$ npm run serve:examples
var Leopard =var leo =var tpl = '<p>I am <%= name %>!</p>'var data =name: 'Leopard'var html = leo // '<p>I am Leopard!</p>'
Or just render a file:
var path =var app =var Leopard =var leo =app
Usage
Install leopard-template via npm
$ npm install leopard-template
Then import leopard-template in whatever way you want
// ES6 import// CommonJS requirevar Leopard =// and then you can start render your templates// var leo = new Leopard()
Or load it with html script
tag
Note:
compileFile
is only available at server side, so we build two versions, if you want to use Leopard directly in browsers, useleopard.browser.js
, otherwise you'll have to useleopard.server.js
.
Configurations
var leo = config
- cache: cache Function body
Syntax
Leopard simply implements ejs syntax.
Wrap statements like for
or if
in <% ... %>
, expressions in <%= ... %>
, and raw HTML in <%- ... %>
Plain Text
var data =name: 'Leopard'var text = '<p>I am <%= name %>!</p>'
HTML
var data =name: '<em>Leopard</em>'var text = '<p>I am <%- name %>!</p>'
Conditions
var data =isOk: falsenickname: 'leo'realname: 'leopard'var conditions_1 = '<p>I am Leopard<%= \', AKA \' + (isOk ? nickname : realname) + \'!\' %></p>'var conditions_2 = '<% if (isOk) { %>' +'<span class=\"nickname\"><%= nickname %></span>' +'<% } else { %>' +'<span class=\"realname\"><%= realname %></span>' +'<% } %>'
Loops
var loops = 'Now I repeat: ' +'<ul>' +'<% for (var i = 0; i < 3; i++) { %>' +'<li>I am Leopard!</li>' +'<% } %>' +'</ul>'
Filters
Filters are now supported in Leopard, you can customize a filter with Leopard.filter
:
var Leopard =Leopardvar text = '<p><%= 'leopard' | toUpperCase %></p>' // <p>LEOPARD</p>
And also, filters can be chained:
// `reverse` is a preset filtervar text = '<p><%= 'leopard' | toUpperCase | reverse %></p>' // <p>DRAPOEL</p>
Test
$ npm run test