DomBuilder
Dombuilder is a simple library that makes it easy to generate dom nodes from a JSON-like structure.
Usage
The module is a single function exported as the global domBuilder
or through an AMD style module as the dombuilder
package.
// Create a hash to store element referencesvar $ = {};// Create the template as a JSON-ML structurevar template = ".profile" // "<div class="profile"> ".left.column" // <div class="left column"> "#date" // <div id="date">Today's Date</div> "#address" "Sunnyvale, California" // native event handlers, not a string to be evaled. ".right.column" { ; } "#email" "tim@creationix.com" "#bio" "Cool Guy" ".form" // $inputField means this element will be available as $.inputField when the call returns. "input$inputField" // Here we're using the reference in the onclick handler "button" { ; } "Click Me" "hr" // The css key sets .style attributes css: width:"100px"height:"50px" // The $ key gets called as soon as this element is created $: { console; } "p" "Inspect the source (not view source) to see how clean this dom is!"; // Calling the function with the template and storage hash will return the root // node (or document fragment is there are multiple root nodes).var root = ;