JavaScript templating
 | This article includes a improve this article by introducing more precise citations. (July 2013) ) |
JavaScript templating refers to the
curly brackets (i.e. {{key}}) to call values of the given key from data files, often JSON
objects.
Examples
All examples use an external file presidents.json with following contents
{
"presidents" : [
{ "name": "Washington", "firstname": "George", "born": "1732", "death": "1799" },
{ "name": "Lincoln", "firstname": "Abraham", "born": "1809", "death": "1865" }
]
}
All examples will produce the following HTML
list
:
- Washington (1732-1799)
- Lincoln (1809-1865)
| Library | HTML Code | Explanation |
|---|---|---|
<link rel="stylesheet" type="text/css" href=".../template.css"/>
<script src=".../jquery.min.js"></script>
<script src=".../jquery.template.min.js"></script> ➊
Our favorite presidents are:
<ul id="target">
<li template="[presidents]" z-var="name ., born ., death .">
${name} (${born}-${death})
</li>
</ul> ➋
<script>
$.getJSON('.../presidents.json', function(data) {
$('#target').template(data);
});
</script> ➌
|
➊ Load the necessary resources, including required jQuery | |
|
Mustache.js
|
<script src=".../jquery.min.js"></script>
<script src=".../mustache.min.js"></script> ➊
Our favorite presidents are:
<ul id="target"></ul> ➋
<script id="president-template" type="text/template">
{{#presidents}}
<li>{{name}} ({{born}}-{{death}})</li>
{{/presidents}}
</script> ➌
<script>
$.getJSON('.../presidents.json', function(data) {
var template = $('#president-template').html();
var info = Mustache.to_html(template, data);
$('#target').html(info);
});
</script> ➍
|
➊ Load the necessary libraries, here mustache.js and jQuery ➋ The HTML code provides a "target" to insert generated contents into. ➌ Provide a template named "president-template". ➍ Last is a function grasping the JSON data, and for each president's subitem, grasping one template and filling it to finally select the HTML page's target appending the whole to it. |
Templating becomes useful when the information distributed may change, is too large to be maintained in various HTML pages by available human resources 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, archived from the original on 2013-05-13
- 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/
- Comparison with Other Frameworks, Vue.js, retrieved 11 December 2018