JavaScript templating: Difference between revisions

Content deleted Content added

Inline

Latest revision as of 19:40, 29 October 2024

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 computations to the client's web browser. Popular JavaScript templating libraries are AngularJS, Backbone.js, Ember.js, Handlebars.js, JSX (used by React), Vue.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.

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

DNA Template

<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
➋ The HTML code with template attribute marking for-each subtemplate and z-var replacement instructions.
➌ Load JSON data from presidents.json and apply data to the HTML template with id attribute "target".

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.

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

@@ Line 1: / Line 1: @@
+{{Short description|Client side data binding method implemented with JavaScript}}
 {{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 calculus to the client's web browser. Popular Javascript templating libraries are [[Angular.js]], [[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.
+'''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 computations to the client's web browser. Popular JavaScript templating libraries are [[AngularJS]], [[Backbone.js]], [[Ember.js]], [[Handlebars.js]], [[JSX_(JavaScript)|JSX]] (used by [[React_(JavaScript_library)|React]]), [[Vue.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.
+== Examples ==
+All examples use an external file <code>presidents.json</code> with following contents
+<syntaxhighlight lang="javascript">
+{
+  "presidents" : [
+      { "name": "Washington", "firstname": "George", "born": "1732", "death": "1799" },
+      { "name": "Lincoln", "firstname": "Abraham", "born": "1809", "death": "1865" }
+  ]
+}
+</syntaxhighlight>
+All examples will produce the following HTML [[Unordered list|list]]:
+* Washington (1732-1799)
+* Lincoln (1809-1865)
-== Example ==
 {| class="wikitable"
 |-
+! Library !! HTML Code !! Explanation
-! Explanation !! Result
 |-
+| width="10%"|
+[https://github.com/webdevelopers-eu/jquery-dna-template DNA Template]
 | width="65%"|
+<syntaxhighlight lang="html" line>
-The data is collected within, for example, an external JSON file "presidents.json" such as :
+<link rel="stylesheet" type="text/css" href=".../template.css"/>
-<syntaxhighlight lang="javascript">
+<script src=".../jquery.min.js"></script>
-"presidents" : {
+<script src=".../jquery.template.min.js"></script> ➊
-    { "name": "Washington", "firstname": "George", "born": "1732", "death": "1799" },
-    { "name": "Lincoln", "firstname": "Abraham", "born": "1809", "death": "1865" },
-    ...
-}
-</syntaxhighlight>
-The HTML code provides an "anchor" :
-<source lang="html5">
-<body>
-	Our favorite presidents are:
-	<ul id="anchor"></ul>
-</body>
-</source>
-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 president's subitem, grasping one template and filling it to finally select the html page's anchor appending the whole to it.
-<syntaxhighlight lang="javascript">
-<script src="js/mustache.min.js"></script>  // ➊
-<script src="js/jquery.min.js"></script>
+Our favorite presidents are:
-<script id="president-template" type="text/template">  // ➋
+<ul id="target">
-	{{#presidents}}
-		<li>{{name}} ({{born}}-{{death}})</li>
+    <li template="[presidents]" z-var="name ., born ., death .">
+     ${name} (${born}-${death})
-	{{/presidents}}
-</script>
+    </li>
+</ul> ➋
-<script> // ➌
+<script>
-	$(function() {
+    $.getJSON('.../presidents.json', function(data) {
+        $('#target').template(data);
-		$.getJSON('http://.../presidents.json', function(data) {
+    });
-		    var template = $('#president-template').html();
+</script> ➌
-		    var info = Mustache.to_html(template, data);
-		    $('#anchor').html(info);
-		});
-	});
-</script>
 </syntaxhighlight>
 | valign="top"|
+➊ Load the necessary resources, including required [[jQuery]]<br />
+➋ The HTML code with <code>template</code> attribute marking for-each subtemplate and <code>z-var</code> replacement instructions.<br />
+➌ Load JSON data from <code>presidents.json</code> and apply data to the HTML template with id attribute "<code>target</code>".
+|-
+| width="10%"|
+[[Mustache.js]]
+| width="65%"|
+<syntaxhighlight lang="html" line>
+<script src=".../jquery.min.js"></script>
+<script src=".../mustache.min.js"></script> ➊
 Our favorite presidents are:
+<ul id="target"></ul> ➋
-* Washington (1732-1799)
-* Lincoln (1809-1865)
+<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> ➍
+</syntaxhighlight>
+| valign="top"|
+➊ Load the necessary libraries, here [[mustache.js]] and [[jQuery]]<br />
+➋ The HTML code provides a "target" to insert generated contents into.<br />
+➌ Provide a template named "president-template". <br />
+➍ 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 ==
+* [[Comparison of web template engines]]
-* [[Online Javascript IDE]]
 == References ==
 * {{citation|url=https://developer.mozilla.org/en-US/docs/JavaScript_templates|title=JavaScript templates|publisher=Mozilla Developer Network|year=2013}}
 * {{citation|url=http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more|title=The client-side templating throwdown: mustache, handlebars, dust.js, and more|last=Basavaraj|first=veena|publisher=Linkedin.com|year=2012}}
-* {{citation|url=http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/|title=Introduction to JavaScript Templating (video tutorial) with Mustache.js |last=Villalobos |first=Ray |year=2012 |publisher=ViewSource.com}}
+* {{citation|url=http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ |title=Introduction to JavaScript Templating (video tutorial) with Mustache.js |last=Villalobos |first=Ray |year=2012 |publisher=ViewSource.com |url-status=dead |archiveurl=https://web.archive.org/web/20130513103343/http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ |archivedate=2013-05-13 }}
 * {{citation|url=http://net.tutsplus.com/tutorials/javascript-ajax/best-practices-when-working-with-javascript-templates/ |title=Best Practices When Working With JavaScript Templates |last=Burgess |first=Andrew |year=2012|publisher=Net.tutsplus.com}}
 * {{citation|url=http://viget.com/extend/benchmarking-javascript-templating-libraries|title=Benchmarking Javascript Templating Libraries|year=2009|last=Landau|first=Brian}}
 * http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/
+* {{citation|url=https://vuejs.org/v2/guide/comparison.html|title=Comparison with Other Frameworks|publisher=Vue.js|access-date=11 December 2018}}
 {{JS templating}}
+[[Category:Template engines]]
+[[Category:JavaScript libraries]]

v t e JavaScript templating libraries
Libraries	Angular AngularJS Backbone.js Ember.js Knockout Mustache.js Handlebars.js React.js Vue.js Svelte
Concepts	Model–view–controller (MVC) Model–view–viewmodel (MVVM)