Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript
Branch: master

Merge pull request #1 from mjk/master

Removed deprecated args.callee
Failed to load latest commit information.
test rm DSStore
README.md typo
json2html.js Removed arguments.callee dependency.

README.md

json2html

json2html is a straightforward way to store HTML in JavaScript. It's not a template solution per se, but it lends itself to the application.

  • Native HTML:
    <div class="name-tag">Hello, World</div>
  • json2html
    { "div.name-tag": "Hello, World" }

Usage

var elObj = { "span" : "Testing" };

var el = json2html(elObj);

$(el)  //the element already exists
    --> [<span>Testing</span>]

Syntax

Object keys communicate element tag, classes, and id à la Jade.

    { "h1": "Hello, World" }

    →

    <h1>Hello, World</h1>

Classes/Id

Classes

    { "h1.header.example": "Hello, World" }

    →

    <h1 class="header example">Hello, World</h1>

Add an Id

    { "h1#header.header.example": "Hello, World" }

    →

    <h1 id="header" class="header example">Hello, World</h1>

Attributes

json2html takes a guess here, hoping you haven't got any "span" attributes. Note that "html" ~ innerHTML, although internally it creates a textNode.

    { 
        "a": {
            href: "http://www.github.com",
            html: "Github"
        } 
    }

    →

    <a href="http://www.github.com">Github</a>

Nested elements

Nested elements are treated recursively, which has performance implications

{
    "div": {
        "p": "This is a paragraph"
    }
}

    →

    <div>
         <p>
              This is a paragraph
         </p>
    </div>

Children

Use arrays to keep order:

    {
        "div": [
                {"p": "This is paragraph one"},
                {"p": "This is paragraph two"}
            ]
        }
    }

    →

    <div>
         <p>
              This is paragraph one
         </p>
         <p>
              This is paragraph two
         </p>
    </div>

Templating

Templating in json2html is a little more hands-on than traditional microtemplating. However, it is straightforward and typically yields performance gains.

We're totally still exploring the templating pattern.

    var nameTag = _.template('<div class="name-tag">Hello, <%= name %></div>');
    nameTag({name: "World"});
    var nameTag = function(name) {
        return json2html({
            "div.name-tag": "Hello, " + name
        });
    }
    nameTag("World");
    <div class="name-tag">Hello, World</div>

Performance

json2html operates using native javascript syntax, e.g. a lot of:

    var div = document.createElement("div");
    var text = document.createTextNode("Hello, World");
    div.appendChild(text);

Which is typically faster than:

    $(el).append("<div>Hello, World</div>");

However, really robust benchmarks are still on the todo.

TODO

  • Remove deprecated "callee" use
  • Robust benchmarks
  • Plugin system. For instance, one to pass "click": fn and have an onclick listener.
  • Templating patterns. What's the friendliest way to write a template as JSON?

Copyright and License

Copyright 2012 Clearspring Technologies, Inc.

Licensed under the Apache License, Version 2.0

Something went wrong with that request. Please try again.