I would like to use the jQuery [Templates][1]. On first sight the {{tmpl}} tag seems to be the way to go, but I need to do an extra step when templating and I can't figure out how to do this.
There is a datatype-definition connteced to the properties of a data-object. In the example below 'movie' is a text-field, 'released' a numeric field. Alle text-fields use a certain template, so do all numeric fields. Those nested templates know nothing about the context (here movies) they are used in. So the tag used there is just ${value} always.
The "outer" template instead knows how a movie should look like. Its tags (movie and released) are replaced by the "inner" datatype-related templates. The extra step is to replace ${value} before the outer templating is done.
All I could come up with is this:
//the template used for all string-fields
var templForStrings = "${value}";
//the template used for all numeric fields
var templForNum = "${value}";
//data of a movie
var data = {};
data.movie = "Cowboys and Aliens"; //a string field
data.released = 2011; //a numeric field
//the template to show a movie
var templForMovies = "{{html movie}} ({{html released}})
";
//normally a loop over the fields here
var field = {value: data.movie};
data.movie = $.tmpl(templForStrings, field).fullhtml();
field.value = data.released;
data.released = $.tmpl(templForNum, field).fullhtml();
//now the movie template
$.tmpl(templForMovies, data).appendTo("body");
Of course this scenario is simplified. The datatype-templates are a lot more complex than that. The data can be anything. Because of ${value} meaning two different things here, I don't see how to use nested templates as provided by the plugin. But I'm quite sure there is a more elegant and faster way than my code (which even needs the [fullhtml-Plugin][2]. It would really be nice to have a template like this
${movie} (${released})
as these are creatable by end-users too, and should be as simple as possible.
[1]: http://api.jquery.com/category/plugins/templates/
[2]: http://plugins.jquery.com/project/FullHTML
