Question

Basically, if you have a purely JS app (that get info from socket.io, or from a server with ajax request), and you need to show this data after processing it, what technique are you using?

Currently i’m creating the elements manually with code like

var myDiv = new Element('div',{ /* options */);

And injecting it where I need making all the DOM structure. I find this hard to maintain and especially for those designers that can code html, but they can’t code html from JS.

Is there any way that will improve this process? Is it better to get the html from ajax? or just make html code in a string?

I’m looking for the most optimal in terms of maintenance and resources.

Answer 1

What you’re looking for is a “template”.

You have an HTML template (some divs, etc) and you bind this with the datas you provide in JS. Then, with whatever template engine you’re using, you can get the full HTML.

Here are some template engines out there:

• https://github.com/flatiron/plates
• http://embeddedjs.com/

And a code sample using plates:

var Plates = require('plates'); // specific to node.js, see for client-side use

var html = '<div id="test">Old Value</div>';
var data = { "test": "New Value" };

var output = Plates.bind(html, data); 
console.log( output ); // '<div id="test">New Value</div>'

You can store your templates either in a single file (“templates.html”) loaded through ajax, or by storing it in the HTML page (not really recommended for maintenance matters).

If you store them all in an external file, you can do something like this:

templates.html:

<!-- text/html isn't parsed by the browser so we can put anything in it -->
<script type="text/html" id="template1"> 
    <!-- put your template in there
</script>

And you can get its content through getElementById( 'template1' ).