Java Reference
In-Depth Information
Templates
Many MVC frameworks use
templating languages
to insert dynamic data into the page.
Templating languages can be written in HTML or another language, such as markdown, that
compiles into HTML. They can be whole web pages, but are often just
partials
—parts of a
page. This means that the application can update part of the page without having to make a
request to the server, saving an HTTP request. This is usually done by dynamically inserting
the fragment of HTML into the DOM.
Templating languages allow HTML to be separated from the JavaScript program, making
maintenance easier because they are no longer tightly coupled. The templates are often
stored in separate files or inside their own script tags, so they can be reused and quickly
edited in one place if changes need to be made. It also means that inserting large strings of
HTML into a document (which can have adverse effects on performance) is avoided. All
that is needed is a reference to the relevant file that contains the template.
Templating languages often have a mechanism for inserting dynamic data into the HTML.
These tend to fall into two camps: placing dynamic code inside curly braces (the “mustache”
symbol) or inside the special
<% %>
tags made popular by Embedded Ruby (ERB).
For example, Mustache and Handlebars would use this to insert the value of the variable
name
into a heading tag:
<h1>Hello {{ name }}</h1>
Underscore and EJS, on the other hand, would use the following to achieve the same result:
<h1>Hello <%= name %></h1>
Templating languages also enable you to insert basic programming logic into views, allow-
ing you to conditionally show different messages or use loops to show multiple pieces of
similar code.
For example, say we wanted to display the following array of to-do objects:
var tasks = [
{ name: "Get Milk" },
