blueprints
v0.1.3
Published
blueprints is a JavaScript template library for generating DOM elements. It takes a directory and converts it into a namespaced template library.
Downloads
721
Readme
blueprints is a JavaScript template library for generating DOM elements. It takes a directory and converts it into a namespaced template library.
Installation
npm install blueprints
Usage
Create a template file with a .html extension (can be changed through options object see below) for this example we will name this file list.html. Place this file in a root directory and then compile it using one of the methods below.
root_dir/list.html
<div class="## if (something) { ##a-class## } ##">
## for (var i = 0, l = xs.length; i < l; i++) { ##
<span>##= xs[i].name##</span>
## } ##
</div>
When you include your compiled template library in your javascript web app you will be able to access it using the window.blueprints function passing in the id of the template and data to be used in the template.
var element = window.blueprints('list', {
something: true,
xs: [ { name:'foo' }, { name:'bar' } ]
});
Here is a slightly more compiles template directory and the ids that correspond to the different files.
root_dir/list.html list
root_dir/reports/table.html reports:table
root_dir/reports/structure.html reports:structure
root_dir/reports/daily/breakdown.html reports:daily:breakdown
Compilation
Through a terminal:
$ blueprints {directory}
will out the template file to stdout
$ blueprints {directory} -o {file}
will out the template file to the specified file
$ blueprints -m {directory}
will minify the template file before outputting it
As a module:
var blueprints = require('blueprints');
new blueprints(path, { minify: true }).out(writeable_stream);