Templating

HTML5 has a basic templating element built in. Add a template tag to your page and you will be able to reuse the content in any element of the page by referring to the template.

Regardless of the browser EssentialJS allows you to add template elements using role="template". The Resolver("templates") will give you a place to look up a template object for a predefined template. It leverages the HTMLSnippet functionality to instantiate a branch of DOM elements.

var myTemplate = Resolver("templates")("#abc");

will define a template reference for the template element with the id "abc". Equally Resolver("templates")(".def") will return a template for the template element with the class "abc".

will loaded in the main page or a subsidiary page define a template that can be referenced by abc. The template can be used by a simple call to the clone function.

parentEl.appendChild(myTemplate.clone());

Note that in browsers that do not natively support HTML5 template tags you cannot put one inside a table, as the browser enforces a strict semantic. You can of couse turn a valid element into a template such as,

<table>
<tr role="template" id="my-row"></tr>
</table>

However for tables there is a special Templating Tables support for those particular cases.