JavaScript templating
Javascript templating refers to client side data binding method implemented with Javascript language. This approach became popular thanks to Javascript increase use, increase in client processing capabilities, and the trend to outsource calculus to the client's web browser. Popular Javascript templating librairies being Angular.js, Backbone.js, Ember.js, Handlebar.js, Mustache.js. A frequent practice is to use double curly brackets (i.e. {{key}}) to call values of the given key from data files, often JSON objects.
Example
| Explanation | Result |
|---|---|
|
With the data collected within, for example, an external JSON file "presidents.json" such : "presidents" : {
{ "name": "Washington", "firstname": "George", "born": "1732", "death": "1799" },
{ "name": "Lincoln", "firstname": "Abraham", "born": "1809", "death": "1865" },
...
}
The HTML code providing an "anchor" : <body>
Our favorite presidents are:
<ul id="anchor"></ul>
</body>
The Javascript is in several important parts. ➊ Load the necessary libraries, here mustache.js and Jquery , ➋ provide a template named "president-template". ➌ Last is a function grasping the json data, and for each presidents' subitem, grasping one template and filling it to finaly select the html page's anchor appending the whole to it. <script src="js/mustache.min.js"></script> // ➊
<script src="js/jquery.min.js"></script>
<script id="president-template" type="text/template"> // ➋
{{#presidents}}
<li>{{name}} ({{born}}-{{death}})</li>
{{/presidents}}
</script>
<script> // ➌
$(function() {
$.getJSON('http://.../presidents.json', function(data) {
var template = $('#president-template').html();
var info = Mustache.to_html(template, data);
$('#anchor').html(info);
});
});
</script>
|
Our favorite presidents are:
|
Templating becomes useful when the information distributed may change, is too large to be maitained in various HTML pages by available human ressources and not large enough to require heavier server-side templating.
See also
References
- JavaScript templates, Mozilla Developer Network, 2013
- Basavaraj, veena (2012), The client-side templating throwdown: mustache, handlebars, dust.js, and more, Linkedin.com
- Villalobos, Ray (2012), Introduction to JavaScript Templating (video tutorial) with Mustache.js, ViewSource.com
- Burgess, Andrew (2012), Best Practices When Working With JavaScript Templates, Net.tutsplus.com
- Landau, Brian (2009), Benchmarking Javascript Templating Libraries
- http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/