JavaScript templating - Reference.org

On this page

JavaScript templating

Client-side template processor implemented in JavaScript

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.

We don't have any images related to JavaScript templating yet.

You can add one yourself here.

We don't have any YouTube videos related to JavaScript templating yet.

You can add one yourself here.

We don't have any PDF documents related to JavaScript templating yet.

You can add one yourself here.

We don't have any Books related to JavaScript templating yet.

You can add one yourself here.

We don't have any archived web articles related to JavaScript templating yet.

You can submit a link to a page to archive here.

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.

Examples

See also