JavaScript templating: Difference between revisions
No edit summary |
m Reverted 1 edit by 54.240.196.169 ... |
||
| Line 1: | Line 1: | ||
{{no footnotes|date=July 2013}} |
{{no footnotes|date=July 2013}} |
||
'''JavaScript templating''' refers to the [[client side]] [[data binding]] method implemented with the [[JavaScript|JavaScript language]]. This approach became popular thanks to JavaScript's increased use, its increase in client processing capabilities, and the trend to outsource |
'''JavaScript templating''' refers to the [[client side]] [[data binding]] method implemented with the [[JavaScript|JavaScript language]]. This approach became popular thanks to JavaScript's increased use, its increase in client processing capabilities, and the trend to outsource calculus to the client's web browser. Popular JavaScript templating libraries are [[AngularJS]], [[Backbone.js]], [[Ember.js]], [[Handlebars.js]], and [[Mustache.js]]. A frequent practice is to use double [[curly bracket]]s (i.e. <nowiki>{{key}}</nowiki>) to call values of the given key from data files, often [[JSON]] objects. |
||
== Example == |
== Example == |
||
Revision as of 18:19, 21 December 2015
 | This article includes a list of references, related reading, or external links, but its sources remain unclear because it lacks inline citations. (July 2013) |
JavaScript templating refers to the client side data binding method implemented with the JavaScript language. This approach became popular thanks to JavaScript's increased use, its increase in client processing capabilities, and the trend to outsource calculus to the client's web browser. Popular JavaScript templating libraries are AngularJS, Backbone.js, Ember.js, Handlebars.js, and 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 |
|---|---|
|
The data is collected within, for example, an external JSON file "presidents.json" such as : "presidents" : [
{ "name": "Washington", "firstname": "George", "born": "1732", "death": "1799" },
{ "name": "Lincoln", "firstname": "Abraham", "born": "1809", "death": "1865" },
...
]
The HTML code provides an "anchor" : <body>
Our favorite presidents are:
<ul id="anchor"></ul>
</body>
The JavaScript is in several important parts. <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 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
- 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/