microjungle
HTML templating with JS. The Right Way.
Install
$ npm i -S microjungle
$ bower i -S microjungle
Usage
Browser
or just use it as AMD/CommonJS module.
Non-browser JS environment
Such as Nodejs, but it should work almost anywhere:
var microjungle = ;var plainHTML = ;
Syntax
It's all about JS:
// just an element;// <div></div> // two elements;// <div></div><div></div> // textnode as content;// <div>text content</div> // multiple contents;// <div>text content123and another one</div> // attributes;// <div class="wrapper"></div> // something more complex in browser environment;// <div class="wrapper"><p>inner paragraph<span></span><i></i>0</p></div>
Templating
// index.js var data = ;var template = ;var html = ;
// data.json "title": "url": "#" "text": "some pretty title" "paragraphs": "some pretty paragraph" "another one" "list": "text": "item1" "text": "item2" "active": true "text": "item3" "url": "#" "footer": "input": "type": "text" "value": "some pretty input" "button": "type": "button" "value": "push" "copyright": "all rights reserved, copyright 2011."
// template.js var microjungle = ; module { return ;};
You can even use YAML for static templates and any kind of preprocessors like CoffeeScript.
Test
$ npm run lint$ npm run unit$ npm run unit:dom$ npm run unit:plain
Build
$ npm run build$ npm run build:dom$ npm run build:plain
Notes
As it turned out later after writing the very first version in 2011, the idea is indentical to JsonML, but I hope it still makes sense in another implementation like microjungle :)