toDOM


Introduction ##

Fast and lightweight JSON to DOM generation in less than 60 lines.

$3

* Do not like
* Do not want heavy templating system
* Love javascript
* Want performance
* Are tired of document.createElement

Here is toDOM :
`` javascript

var scope = {};

var el = toDOM({
attr : { className : 'my_class' },
events : {
click : function() {
console.log('div clicked');
},
},
children : [
{
tag : 'p',
label : 'myParagraph',
innerHTML : 'Hello',
style : {
backgroundColor : '#000'
}
}
]
}, scope);

document.body.appendChild(el);

`

Will create the following :

` html





`

With a console.log on click and a reference of the

DOM element in scope :

`javascript
scope.myParagraph // domElement
scope.myParagraph.innerHTML // 'Hello'
`




$3

`javascript

var View = function(o) {
if (o.domDescription) {
this.buildEl(o.domDescription);
}
};

View.prototype = {
buildEl : function(domDescription) {
this.el = toDOM(domDescription, this);
}
}

var myView = new View({
domDescription : {
tag : 'p',
children : [
{
label : 'helloEl',
innerHTML : 'hello!'
}
]
}
});

myView.el // DOM element
myView.helloEl // DOM element
myView.helloEl.innerHTML // 'hello!'

`




$3

* 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:

`javascript
require(['toDOM/toDOM'], function( toDOM ){

})
`


#### With src=" .min.js" ####


Inside the dist folder, download latest standalone minified version or development version and include it in your html page:

`html

`

The module is available via the scope

`javascript
window.toDOM
`

To do ##

*

## Documentation ##

See jsdoc-generated documentation in /documentation

$3

app -> development files
|- bower_components -> 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 tasks, see generator-mangrove-module
|
dist -> distribution & build files
|
node_modules -> node packages
|
documentation -> jsdoc 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

$3

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 ..

$3

* Cyril Agosta
* Sam Ton That
* Pierre Cole

License ##

MIT License