Book Image

Web Development with Jade

By : Sean Lang
Book Image

Web Development with Jade

By: Sean Lang

Overview of this book

Table of Contents (16 chapters)

Adding logic with JavaScript


As I've already mentioned, Jade compiles into JS and allows you to use JS directly in your template. So, we can use any of the logical operators that JS provides to build our markup.

If/else

The most basic logical operator is the if statement, as shown in the following code snippet:

Jade

HTML

- name = "Bob"

- if (name == "Bob") {
  h1 Hello Bob
- } else {
  h1 My name is #{name}
- }
<h1>Hello Bob</h1>

And the shorthand form (the ternary operator) also works:

Jade

HTML

- name = 'Bob'
- greeting = (name == 'Bob' ? 'Hello' : 'My name is')
h1 #{greeting} #{name}
<h1>Hello Bob</h1>

Tip

Switches don't work. Use the case statement that is explained in the next section.

For loops

Loops can be used to iterate over lists or repeat elements a certain number of times, an example is given in the following code snippet:

Jade

HTML

- list = ['one', 'two', 'three'];

ul
  - for (var i = 0; i < list.length; i++){
      li=list[i]
  - }
<ul>
  <li...