I never had problems to make anything from json to html and so on. I saw to many libraries for ajax html templating but i never found an answer why i should use.
Maybe the main answer is code visibility and maintenance? What about speed or any other reason ?
This is how i design html from json:
function MakeRow(item, alt) {
var html = "<div class='item "+alt+"'>";
html += "<div class='checkbox'><input type='checkbox' name='checkedRecords' value='" + item.ID + "' /></div>";
html += "<div class='attach'><img src='" + item.Attach + "' /></div>";
html += "<div class='from'>"+item.From+"</div>";
html += "<div class='title'>"+item.Title+"</div>";
html += "<div class='date'>"+item.Date+"</div></div>";
return html;
}
Templating is a way to manage separation of concerns. The basic idea is that your HTML should be concerned with the structure of the document, and your javascript is concerned with updating the data presented by the document.
By using templating the HTML doesn’t have to know anything about the data beyond the names of the properties the template is bound to, and the Javascript doesn’t have to know anything about the structure of how the data is to be presented. The Javascript just retrieves the data from wherever and then popultaes the template defined in the HTML with the appropriate values.
The approach in your question work, obviously, but the problem is that if you want to change the layout of your page you potentially have to trawl through your Javascript and modify all this code. With templating, all of layout is where it should be – in the HTML – so you can modify the layout as you want and it should all just work, within limits of course.