An easy dombuilder using json-ml style syntax
JavaScript CSS
Latest commit bb5bc67 Jun 6, 2014 @creationix Add component abilities
Permalink
Failed to load latest commit information.
.travis.yml Add phantomjs unit test Aug 3, 2012
README.md
component.json Also bump component.json version to 0.1.2 Nov 8, 2012
dombuilder.js
index.html Fix typo in unit test Aug 3, 2012
package.json
style.css
test.js Add phantomjs unit test Aug 3, 2012

README.md

DomBuilder

Build Status

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 references
var $ = {};
// Create the template as a JSON-ML structure
var template = [
  [".profile",  // "<div class="profile">
    [".left.column", // <div class="left column">
      ["#date", new Date().toString() ], // <div id="date">Today's Date</div>
      ["#address", "Sunnyvale, California" ]
    ],
    // native event handlers, not a string to be evaled.
    [".right.column", { onclick: function (evt) { alert("Foo!"); } }, 
      ["#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", {onclick: function () { alert($.inputField.value); }}, "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
    $: function (hr) { console.log(hr); }
  }],
  ["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 = domBuilder(template, $);