A wrapper class for using HTML5 templates more effectively
The Template Factory Class aims at using HTML5 template objects more efficiently.
It not only abstracts the template tags across broser versions, but also provides some convinience functions for list handling and data storage. Template Factory ensures that you don't need to bother about list management for managing your data in HTML structures.
The template factory finds all templates in your HTML source and generates accessor classes for them. The accessor class will fetch all tags with an ID and generate very basic accessors for them, so you can easily assign data to them.
The Template Fractory also provides a (non-standard) "component" tag that provides the same behaviour as the template tag for static HTML content. Different to the tempate tag, a component is non-replacing. This means that the component content remains unchanged in the HTML document. However, the template factory allows you to use exactly the same API as for templates.
The following code demonstrate the basic use of this module.
<!DOCTYPE html>
<html>
<body>
<div id="mycontainer">
<template id="mytemplate">
<div>
<span id="firstname"></span>
<span id="lastname"></span>
</div>
</template>
</div>
<script type="text/javascript" src="TemplateFactory.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>The following lines include the logic of your script.
var templates = new TemplateFactory();
var myClients = [{cn: 'john-doe', firstname: "John", lastname: "Doe"},
{cn: 'bob-smith', firstname: 'Bob', lastname: 'Smith' }];
var myTmpl = templates.getTemplate('mytemplate');
for (var i = 0; i < myClients.length; i++) {
// create a new HTML block for each client
myTmpl.attach(myClients[i].cn);
// fill the client data
myTmpl.firstname.text = myClients[i].firstname;
myTmpl.lastname.text = myClients[i].lastname;
}This example will result in the following HTML.
<!DOCTYPE html>
<html>
<body>
<div id="mycontainer">
<div id="0_mytemplate_john-doe">
<span id="firstname_mytemplate_john-doe">John</span>
<span id="lastname_mytemplate_john-doe">Doe</span>
</div>
<div id="0_mytemplate_bob-smith">
<span id="firstname_mytemplate_bob-smith">Bob</span>
<span id="lastname_mytemplate_bob-smith">Smith</span>
</div>
</div>
</body>
</html>The Template Factory Class allows you also to manipulate the data that had been generated by a template.
For example, the following code will replace the firstname of the id "john-doe" to jane.
if(myTmpl.find('john-doe')) {
myTmpl.firstname.text = 'jane';
}If you prefer to put your templates elsewhere in the code you can also do that. The following example achieves the same result as the first example.
<!DOCTYPE html>
<html>
<body>
<div id="mycontainer"></div>
<template id="mytemplate">
<div>
<span id="firstname"></span>
<span id="lastname"></span>
</div>
</template>
<script type="text/javascript" src="TemplateFactory.js"></script>
<script type="text/javascript" src="myscript2.js"></script>
</body>
</html>var templates = new TemplateFactory();
var myClients = [{cn: 'john-doe', firstname: "John", lastname: "Doe"},
{cn: 'bob-smith', firstname: 'Bob', lastname: 'Smith' }];
var myTmpl = templates.getTemplate('mytemplate');
// inform the template about its target element.
// Note that nothing will happen when the new target element is undefined.
myTmpl.target = document.getElementById('mycontainer');
for (var i = 0; i < myClients.length; i++) {
// create a new HTML block for each client in the target element
myTmpl.attach(myClients[i].cn);
// fill the client data
myTmpl.firstname.text = myClients[i].firstname;
myTmpl.lastname.text = myClients[i].lastname;
}Template Factory is open source under the MIT LICENSE.
Christian Glahn at Mobinaut.io