JSONHTML
JSON goes in HTML comes out, pretty straightforward ;) It might seen like a lot of JSON for some HTML, but it's better then having HTML in your javascript.
JSONHTML is only 1,22kb so why not just use it and keep your code clean.
Installation
Bower
bower install jsonhtml
NPM
<script src="dist/jsonhtml.min.js" type="application/javascript"></script>
Usage
Define your JSON object, nest away!
var json = dom: children: tag: 'body' children: tag: 'h1' inner: 'Your page title' ;
Adding attributes to elements
tag: 'a' inner: 'Go to page' attr: href: '/your-page' class: 'btn'
Output:
Go to page
Multiple classes
tag: 'a' attr: href: '/your-page' class: 'btn' 'green' 'large'
Output:
Go to page
Inner text replacement
tag: 'h1' inner: 'Change this %s because I like %s' 'text' 'stuff'
Output:
Change this text because I like stuff
Callbacks
var json = dom: {} { // Call an inline function, or } onComplete: 'otherFunction' // Call function by string;
Examples
Here are a few examples that could be useful
Table
tag: 'table' children: tag: 'tr' children: tag: 'th' inner: 'Name' tag: 'th' inner: 'Age' tag: 'th' inner: 'County' tag: 'tr' children: tag: 'td' inner: 'Gus' tag: 'td' inner: '23' tag: 'td' inner: 'The Netherlands' tag: 'tr' children: tag: 'td' inner: 'Steven' tag: 'td' inner: '54' tag: 'td' inner: 'Columbia' tag: 'tr' children: tag: 'td' inner: 'Esther' tag: 'td' inner: '28' tag: 'td' inner: 'Germany'
Output:
Name Age County Gus 23 The Netherlands Steven 54 Columbia Esther 28 Germany
Form
tag: 'form' attr: method: 'post' action: '/some-page' children: tag: 'div' attr: class: 'input-container' children: tag: 'label' inner: 'Name' attr: for: 'Name' tag: 'input' attr: type: 'text' id: 'Name' placeholder: 'Enter your name' tag: 'div' attr: class: 'input-container' children: tag: 'label' inner: 'E-mail' attr: for: 'Email' tag: 'input' attr: type: 'email' id: 'Email' tag: 'div' attr: class: 'input-container' children: tag: 'input' attr: type: 'submit'
Output:
Name E-mail
Changelog
1.0 Inital version