Json2html

#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