Pug (formerly Jade) Variables Not Working (Interpolating) Correctly Inside Anchor Href
<p>I'm playing around with Node and Express and I'm using the Pug (formerly Jade) templating engine to render my html. Everything has been working fine up until I started trying to inject variables into the <code>href</code> of my anchor links. Whats odd is that if I change my Express app <code>view engine</code> to <code>jade</code> then things start working as expected.</p>

<p>Based upon <a href="https://github.com/pugjs/pug/issues/1028" rel="noreferrer">other articles</a> I've read the issue appears to be an interpolation issue, however I can't seem to find a resource or documentation that shows how to correctly fix this issue.</p>

<p>Ex.</p>

<p>I'm pulling in data from a <code>rooms</code> json array and then using a <code>for</code> loop to cycle through each array element and output the data for each room. Using <code>jade</code> the following works. </p>

<pre><code>table.table.table-striped
  thead
    tr
      th Name
      th Id
  tbody
    each room in rooms
      tr
        td(style="width: 50px;")
          a(href!="/admin/rooms/delete/#{room.id}") Delete
        td #{allTitleCase(room.name)}
        td #{room.id}
</code></pre>

<p>Using <code>pug</code> the above does NOT work correctly. Specifically the <code>a(href='/admin/rooms/delete/#{room.id}') Delete</code> link doesn't work correctly. Instead of injecting the room id into the link href, it literally outputs <em>#{room.id}</em> as the end part the <code>href</code> link.</p>

<p>Any ideas how to fix this in <code>pug</code>? </p>

<p>Note that I've tried all of the following using <code>pug</code> but none of these options have worked.</p>

<ul>
<li><code>a(href="/admin/rooms/delete/#{room.id}") Delete</code></li>
<li><code>a(href!="/admin/rooms/delete/#{room.id}") Delete</code></li>
</ul>