TechThali

Template Engines are widely used in web frameworks to generate HTML. Some of the popular template engines are Smarty (PHP) and ERB (Ruby). Templates are often be part of the views in MVC architecture.

Express web framework module for node.js uses Jade as the template engine. It is an indentation based template engine and hierarchy of the HTML structure is based on the indentation. There is no need to write tags as it will be automatically created.

Example : In the following example (–> ) represents ONE “white space” used for indentation.

h1 Jade Template Example
section
--> p Jade is a Template Engine
? h2 Rules of Jade
?--> p The following are the rules of Jade

The above Jade template will be translated into the following HTML script.

<h1> Jade Template Example </h1>
<section>
<p> Jade is a Template Engine</p>

<h2> Rules of Jade</h2>
<p dir="ltr"><p> The following are the rules of Jade</p></p>
</section>

Page Structure Definition in Jade

To define a simple tag, write the tag name

Example:

section

will be converted to <section> </section>

To define an ID for the Tag, use #

section#header
  will be converted to <section id=”header”> </section> # represents id

To define class, use . (dot). To define more than one class use multiple dots

p.first
  will be converted to <p class=”first” > </p>

p.first.second.third
  will be converted to  <p class=”first second third” > </p> . represents class

To define ID and class for a tag use # and dot together

p#details.first.second.third
 will be converted to <p id=”details” class=”first second third” > </p>

To break a long sentence for readability use | (pipe)

p
| This is a
| long text and
| we should break it up
| for readability
 will be converted to  <p>This is a long text and we should break it up for readability<p>

To print the variable name use the format : #{VARIABLE}

p The name : #{name}

will print the name and format the line as <p> The name: Suresh Vasudev </p>

Use MINUS sign (-) to execute a line. Those lines starting with (-) will be execute but it will not output any return value. Many used for variable declaration and language constructs like loops, conditions etc

\- var temp = 100

​    will define a variable temp with value 100

Use EQUAL (=) sigh to evaluate a statement, escape it if required and print the output

Also please note that variables can be printed using (=) sign.

To create inline JavaScript programs use script tag

Example

script
alert(‘Hello World’)

Use INCLUDE to include other templates within a template.

Loops in Jade

each {obj} in {Objects} : To loop through Arrays and Objects

for {obj} in {Objects} : For loop

IF Conditions

if {condition} else : If Loop

Mixins

A mechanism in Jade is to write reusable cleaner code. To define mixin, use the mixin keyword.

Example: outputting data in a Loop

mixin listData(objects)
ul
each obj in objects
li= obj

Once the mixin is defined, you can use it and reuse it in your templates:
\- countries= ['IN', 'UK’, 'USA']
mixin listData(countries)

\- states= ['LA’, 'CA’, 'NY']
mixin listData(states)