https://github.com/creationix/dombuilder

An easy dombuilder using json-ml style syntax
https://github.com/creationix/dombuilder

Last synced: 3 months ago
JSON representation

An easy dombuilder using json-ml style syntax

• Host: GitHub
• URL: https://github.com/creationix/dombuilder
• Owner: creationix
• Created: 2011-04-13T07:57:52.000Z (about 15 years ago)
• Default Branch: master
• Last Pushed: 2017-12-21T21:06:19.000Z (over 8 years ago)
• Last Synced: 2025-10-24T07:56:23.968Z (8 months ago)
• Language: JavaScript
• Homepage: http://creationix.com/dombuilder/
• Size: 12.7 KB
• Stars: 35
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# DomBuilder

[![Build Status](https://secure.travis-ci.org/creationix/dombuilder.png)](http://travis-ci.org/creationix/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.

```js

// Create a hash to store element references

var $ = {};

// Create the template as a JSON-ML structure

var template = [

  [".profile",  // "


    [".left.column", // 


      ["#date", new Date().toString() ], // 
Today's Date

      ["#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, $);

```