What's the equivalent jade code for this ejs code?

Question

What's the equivalent jade code for this ejs code?

In ejs you can do something like this.

<ul id="photos" class="photos">
  <% req.photos.forEach(function(photo) { %>
    <li style="background-image: url(<%= photo.picture %>>);" class="<%= photo.link %>">
      <a href="<%= photo.link %>>" target="_top"></a>
    </li>
  <% }); %>
</ul>

I'm trying to do something that is just like this, but I can't get it to work. What's particularly confusing is how to make loops work and what to escape and how to escape it.

What would this code look like in Jade?

javascript
html
node.js
syntax
jade

Answer 1

should be:

ul(id='photos',class='photos')
  - req.photos.forEach(function(photo){
    li(style='background-image: url('+photo.picture+');', class=photo.link)
      a(href=photo.link, target='_top')
  - })

basically you need to escape strings only when using them inside attributes

see https://github.com/visionmedia/jade/#code & https://github.com/visionmedia/jade/#attributes for more info.