Question

I would like to have a set of nice tools in JavaScript for creating a small, reusable components easily. Component builder should have some nice API to create an html output for given data, which can be embedded directly on website. An example would be:

var data = smth; // some data, probably JSON ...
var builder = new Builder();
$(container).html( builder.build('user_details_template').with(data) );

This could render, for instance:

<div>
   <h1>User details</h1>
   <span class="username">Aaron Rodgers</span>
   <span class="description">Best QB in the entire world</span>
</div>

Pardon subjective example.

Now, is there some neat way in JavaScript to build such tool? In Java I would build or use some template engine which could accept arbitrary data and render HTML output.

I’m not a JavaScript expert, so the only tools I can think of are string concatenation and regular expressions.

But what are the best practices to do that in JavaScript?

Answer 1

A template system in jquery ui is in planning phase: http://api.jquery.com/template/. However there exist alternative libraries like Mustache