-
Notifications
You must be signed in to change notification settings - Fork 9
.template() – Reusable 'Named Templates'
jquery-tmpl plugins render templates by first compiling the markup into a function – a ‘compiled template’ function, which can be cached, and which is used internally to render the template with the data, by a process of string concatenation of data values and markup strings.
Users do not usually need to use the compiled template functions themselves. However, for performance optimization, it is best to ensure that compiled templates are appropriately cached.
In the case of templates declared in script blocks, caching occurs automatically, so a given template will be compiled just once, the first time it is rendered. However, in the case of templates provided in the form of HTML strings, as in $.tmpl( "<li>${Name}</li>", movies ).appendTo( "#movieList" ), it is important to understand that the markup will go through a compilation process each time the above code is called.
To avoid repeated compilation, it is preferable to compile the HTML string first into a ‘named template’, using:
$.template( "userDefinedName", "<li>${Name}</li>" );.
The resulting compiled template can then be used to render HTML with data, simply by passing the template name instead of the full markup string:
$.tmpl( "userDefinedName", movies ).appendTo( "#movieList" ).
This will use the previously compiled template.
$.template( template, name );
Returns:
A ‘compiled template’ function.
(Note: Return value not used directly except in a few advanced scenarios).
Description:
Convert the markup in the template parameter into a ‘compiled template’. Make the compiled template available for reuse, by associating it with the name provided in the name parameter.
Parameters:
name: – string to be used as name, for referencing the compiled template.
template: – string, html element, or jQuery object wrapping an element, containing the template markup.
Example:
$.template( "userDefinedName", "<li>${Name}</li>" );
See Simple examples for the full code and a link to a live page.
$( selectorOfScriptBlock ).template( name );
Returns:
A ‘compiled template’ function.
(Note: Return value not used directly except in a few advanced scenarios).
Description:
Take the first element in the matched set, and convert its content into a ‘compiled template’. Make the compiled template available for reuse, by associating it with the name provided in the name parameter.
Parameters:
name: – string to be used as name, for referencing the compiled template.
Note:
In this scenario, where the .template() API is used to create a ‘named template’ for a template declared in a script block, the procedure is no longer necessary from a performance point of view, since the template will already be cached automatically. In this case the ‘named template’ pattern is simply a convenience, so the template can be refered to by name, rather than by using a selector to the script block.
Example:
$( "#movieTemplate" ).template( "userDefinedName" );
See Simple examples for the full code and a link to a live page.
In most scenarios, the ‘name’ string can simply be used directly as template parameter:
Example:
$.tmpl( "userDefinedName", movies ).appendTo( "#movieList" );
See Simple examples for the full code and a link to a live page.
In the above code, the .tmpl() plugin will determine whether “userDefinedName” corresponds to a known ‘named template’, and if so will render it. But if not, then “userDefinedName” will be treated as a markup string, and will be used directly as template.
Getting the compiled template:
In some more advanced scenarios, it may be useful to obtain a reference to the compiled template itself. This can be done using the .template() plugin, as follows
Example:
var myCompiledTemplateFunction = $.template( "userDefinedName");