Jade Mixins (iteration, blocks, attributes)

Menu
  1. 1. Jade iteration
  2. 2. Mixin arguments can be objects too
  3. 3. What are mixin attributes?

Consider the use of iteration and variables in the Jade mixins.

Jade iteration

The basic pattern in which the default variable “breadcrumb_list” equal to null. includes/layout.jade

1
2
3
4
5
...
block breadcrumb
-var breadcrumb_list = [];
block content
...

Template iteration breadcrumbs. includes/breadcrumbs.jade

1
2
3
4
5
6
7
8
9
.breadcrumb-container
-var breadcrumb_list_def = [{"url": "/", "title": "Main"}, {"url": "", "title": "About"}]
ol.beardcrumb
each val in breadcrumb_list.length ? breadcrumb_list : breadcrumb_list_def
li
if val.val
a(href=val.url) #{val.title}
else
| #{val.title}

Call pattern and determining an array of breadcrumbs list

1
2
3
4
5
6
extends ./includes/layout.jade
block content
.row
block breadcrumb
-var breadcrumb_list = [{"url": "/", "title": "Главная"}, {"url": "about.html", "title": "About"}, {"url": "", "title": "Company"}]
include ./includes/breadcrumbs

This will generate the HTML,

1
2
3
4
5
6
7
8
9
<div class="row">
<div class="breadcrumb-container">
<ol class="breadcrumb">
<li><a href="/">Main</a></li>
<li><a href="about.html">About</a></li>
<li>Company</li>
</ol>
</div>
</div>

Mixin arguments can be objects too

You don’t have to just pass in strings to the mixins, but you can use any Javascript objects you passed into the render call or that you created earlier in the template. This can lead to some useful mixins like this one to convert a Javascript array to a services list with list of the links.

1
2
3
4
5
6
7
8
9
10
11
mixin services(_src, _title, list)
.col-xs-12.col-sm-4.col-md-3.col-lg-3.thumbnail-list__item
.services.box
.services__media.box-img
img(src=_src)
.services__content.box-content
.services__title !{_title}
ul.services-links
each val in list
li.services-links__item
a(href=val.url) #{val.text}

This variable “list” is array.

1
2
3
.row.thumbnail-list
-var list = [{"url": "branding_banking.html", "text": "Branding of banking equipment"}, {"url": "painting_atm.html", "text": "Painting ATMs"}, {"url": "pasting_film_atm.html", "text": "Pasting film ATMs"}]
+services("f/i/services/atms.png", "Services for banks", list)

This will generate the HTML,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="row thumbnail-list">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 thumbnail-list__item">
<div class="services box">
<div class="services__media box-img"><img src="f/i/services/atms.png"></div>
<div class="services__content box-content">
<div class="services__title">Services for banks</div>
<ul class="services-links">
<li class="services-links__item"><a href="branding_banking.html">Branding of banking equipment</a></li>
<li class="services-links__item"><a href="painting_atm.html">Painting ATMs</a></li>
<li class="services-links__item"><a href="pasting_film_atm.html">Pasting film ATMs</a></li>
</ul>
</div>
</div>
</div>
</div>

What are mixin attributes?

Mixins have the ability to let you modify the attributes of one of the tags inside of it when you modify the attributes of the mixin. For example, suppose that you have a mixin to define a section of the page with a header that you use a lot, but you change some of the style attributes like the width and display type a lot.

1
2
3
4
5
mixin header(title)
.container(attributes)
h3.sectionHeader #{title}
.content
block

Notice the attributes keyword. Now you can use the mixin like so,

1
+header("Header Title")(style='text-align:center; display: inline-block; width: 980px;')

And the style attribute will now be applied to the container div.