Keeping transmission down to a minimum with javascript

Question

Has anyone ever worked with a system of passing back say, some JSON data and using a javascript routine to generate the HTML to save on bandwidth?

What methods are there and are there any templating systems available?

Answer 1

Start with John Resig's JavaScript Micro-Templating.

Answer 2

Some like it, some hate it, but you can create templates of HTML in string form within your base application package (e.g., the js files included in the main page.)

var fooTemplate = "<div class='%div_class_parent%'>"+
                    "<div class='%div_class_child%'/>"+
                  "</div>";

then you just load that into an existing DOM node using the innerHTML method.

document.getElementById('someNode').innerHTML = parseFooTemplate();

where parseFooTemplate returns fooTemplate with the %% elements replaced with correct data that was returned from the JSON.

This is just one of many ways to go about it. The dojo toolkit has their own way where widgets can have a HTML template behind the scenes. There's too many ways to enumerate here.

Answer 3

To generate HTML basing on JSON you will need some template engine for javascript
I would reccomend Zparse template engine http://code.riiv.net/zparse/ it is really great - i using it a lot.

The best part - you can extend it easily by declaring your own tags.