woensdag 10 juli 2013

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.


Geen opmerkingen:

Een reactie plaatsen