jade template with variable in element id

For most NodeJS projects I rely on Jade for rendering views.

A quick example of how to generate a set of elements based on your data:

ul
each val in [1, 2, 3, 4, 5]
li= val

This will render the following html:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

And another quick example of how to assign id and class names to an element:

a#main-link.some-class

Resulting:

<a id="main-link" class="some-class"></a>

A very powerful yet easy and minimal syntax for HTML. However I often need to combine these two. That is render a list of items in which the element IDs are specific for each rendered element. The solution looks like this. Consider the items set to hold objects with an ._id and value property.

ul
each item in items
li(id='element#{item._id})= item.value

That’s it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please reload

Please Wait