Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

An easy dombuilder using json-ml style syntax

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 .travis.yml
Octocat-spinner-32 README.md
Octocat-spinner-32 component.json
Octocat-spinner-32 dombuilder.js
Octocat-spinner-32 index.html
Octocat-spinner-32 package.json
Octocat-spinner-32 style.css
Octocat-spinner-32 test.js
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, $);
Something went wrong with that request. Please try again.