toDOM
Introduction
Fast and lightweight JSON to DOM generation in less than 60 lines.
You :
- Do not like
<html>
- Do not want heavy templating system
- Love javascript
- Want performance
- Are tired of document.createElement
Here is toDOM :
var scope = {};var el =;documentbody;
Will create the following :
Hello
With a console.log on click and a reference of the <p>
DOM element in scope :
scopemyParagraph // domElement scopemyParagraphinnerHTML // 'Hello'
Usage in object oriented javascript :
var { if odomDescription this; }; Viewprototype = { thisel = ; } var myView = domDescription : tag : 'p' children : label : 'helloEl' innerHTML : 'hello!' ; myViewel // DOM elementmyViewhelloEl // DOM elementmyViewhelloElinnerHTML // 'hello!'
Also :
- Default tag is 'div'
Install
toDOM is coded as AMD module but can be installed with npm, bower or old-fashioned src=".min.js".
With npm:
npm install todom
and use it with nodejs:
var toDOM = require('todom')
With bower:
bower install toDOM
Point toDOM
to [bower_components_path]/toDOM/app/toDOM.js
into your requirejs path config
and load it with requirejs:
With src=" .min.js"
Inside the dist
folder, download latest standalone minified version or development version and include it in your html page:
The module is available via the scope
windowtoDOM
To do
Documentation
See jsdoc-generated documentation in /documentation
Folder Structure
app -> development files
|- bower_components -> [bower](https://github.com/bower/bower) front-end packages
|- main.js -> main file for browser and node.js, handle AMD config
|- to_dom -> main AMD module
test -> unit tests
|
tasks -> [Grunt](http://gruntjs.com/) tasks, see [generator-mangrove-module](https://github.com/cagosta/generator-mangrove-module)
|
dist -> distribution & build files
|
node_modules -> node packages
|
documentation -> [jsdoc](http://usejsdoc.org/about-jsdoc3.html) generated documentation
Run unit tests
On the browser
Run grunt test:browser
and open test/
on your browser.
On a headless browser
grunt test:headless
will run your tests in a headless browser, with phantomjs and mocha
On node
grunt test:node
will run your tests with node and mocha.
Because of requirejs, the mocha
command does not work.
Build your own
This project uses Node.js, Grunt and Require.js for the build process. If for some reason you need to build a custom version install Node.js, npm install
and run:
grunt build
Yeoman Mangrove module Generator
This module is based on a Yeoman generator: Generator-mangrove-module
Check it for task-related references such as build, deploy etc ..