JavaScript templating

Popular JavaScript templating libraries are AngularJS, Backbone.js, Ember.js, Handlebars.js, JSX (used by React), Vue.js and Mustache.js.

All examples use an external file presidents.json with following contents All examples will produce the following HTML list: DNA Template ➊ Load the necessary resources, including required jQuery ➋ The HTML code with template attribute marking for-each subtemplate and z-var replacement instructions.

Mustache.js ➊ Load the necessary libraries, here mustache.js and jQuery ➋ The HTML code provides a "target" to insert generated contents into.

➍ 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.