Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cho45/micro-template.js
A template engine on JavaScript which like embed js
https://github.com/cho45/micro-template.js
ejs embed-js html javascript template-engine
Last synced: about 2 hours ago
JSON representation
A template engine on JavaScript which like embed js
- Host: GitHub
- URL: https://github.com/cho45/micro-template.js
- Owner: cho45
- Created: 2012-08-21T11:03:41.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2021-11-30T11:48:55.000Z (almost 3 years ago)
- Last Synced: 2024-09-20T08:31:58.731Z (8 days ago)
- Topics: ejs, embed-js, html, javascript, template-engine
- Language: JavaScript
- Homepage:
- Size: 26.4 KB
- Stars: 51
- Watchers: 14
- Forks: 16
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
micro-template.js
=================
https://github.com/cho45/micro-template.js
micro-template is a template engine on JavaScript which like embed js.
This is inspired from [John Resig's template]( http://ejohn.org/blog/javascript-micro-templating/ ) but has more efficient feature:
* Better error messages: show line-number in runtime errors
* Support source map: debug is more easily on Chrome including syntax errors
* Well tested: tested on node.js
* Escape by default: all output is escaped by default for security
SYNOPSIS
========
## on HTML
```
<div class='foobar' id="aaa">
<% if (isFoo) { %>
<%= foobar %>
<% } else { %>
<%= foobaz %>
<% } %>
<%=raw html %>
</div>
```
```
// foo.js
window.onload = function () {
var html = template('tmpl1', {
isFoo : true,
foobar : 'foobar!!',
foobaz : 'foobaz!!',
html : 'Helloooo'
});
console.log(html);
};
```
## on node.js:
```
var template = require('micro-template').template;
template.get = function (id) { return require('fs').readFileSync('tmpl/' + id + '.tmpl', 'utf-8') };
var result = template('part1', {
foo : 'bar',
baz : 'piyo'
});
```
SYNTAX
======
* `<% … %>`: normal script part
* `<%= … %>`: escaped html output part
* `<%=raw …%>`: unescaped (almost dangerous) html output part
DESCRIPTION
===========
## template(id or source [, data ])
If the first argument of template matches `/^[\w\-]+$/`, it is treated as `id` of template. In this case, use `document.getElementById(id).innerHTML` to get source.
Otherwise, the first argument is treated as source directly.
The second argument is optional. If it was NOT supplied, `template()` returns `Function`, otherwise `String`.
CUSTOM `get` FUNCTION
=====================
By default, micro-template uses `document.getElementById(id).innerHTML` to get template source from id.
To override this behaviour, you can set function to `template.get`.
```
template.get = function (id) { return require('fs').readFileSync('tmpl/' + id + '.tmpl', 'utf-8') };
```
DEFINE DATA VARIABLE EXPLICITLY
================================
By default, micro-template uses `with` syntax to expand data variables. This behavior is almost convenience, but if you want to expressly fast template function, you can do without `with` by sepcify `template.varible`.
```
template.variable = 'tmpl';
var func = template('aaa <% tmpl.foo %> bbb');
var result = func({ foo : 'foo' });
```
`template.variable` is used to data variable name in template code. And `with` syntax is not used any more. So you can't refer to variable without `tmpl.` prefix in this case.
EXTENDED FEATURES
=================
This package also provides `extended` function which includes `include` and `wrapper` function. Of course, this feature can be used on browsers by just copying and pasting `lib/micro-template.js`.
## include(name)
```
var template = require('micro-template').extended;
template('view1', { foo : 'bar' });
```
```
aaa
<% include('view2') %>
bbb
```
```
Hello, World!
```
## wrapper(name, func)
```
var template = require('micro-template').extended;
template('view1', { foo : 'bar' });
```
```
<% wrapper('wrapper', function () { %>
Hello, World!
<% }) %>
```
```
<%= foo %>
<%=raw content %>
```
BENCHMARK
=========
on Browsers:
* http://jsdo.it/cho45/rjwe/fullscreen
node:
* node misc/benchmark.js
LICENSE
=======
MIT: https://cho45.github.io/mit-license