Logic in Templates | Web Development with Jade

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

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Web Development with Jade

By : Sean Lang

Web Development with Jade

By: Sean Lang

Overview of this book

Adding logic with JavaScript

If/else

Tip

For loops

Web Development with Jade

By : Sean Lang

Web Development with Jade

By: Sean Lang

Overview of this book

Adding logic with JavaScript

If/else

Tip

For loops

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access