Corey Corey - 4 months ago 121
Node.js Question

Pug (formerly Jade) Variables Not Working (Interpolating) Correctly Inside Anchor Href

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

href
of my anchor links. Whats odd is that if I change my Express app
view engine
to
jade
then things start working as expected.

Based upon other articles 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.

Ex.

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

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}


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

Any ideas how to fix this in
pug
?

Note that I've tried all of the following using
pug
but none of these options have worked.


  • a(href="/admin/rooms/delete/#{room.id}") Delete

  • a(href!="/admin/rooms/delete/#{room.id}") Delete


Answer

UPDATE: Pug 2.0 introduced breaking changes to how interpolation is handled.

Based on the changelog, any of the following should work:

// to solve OP's problem, the following can be used:
a(href="/admin/rooms/delete/" + room.id) Delete

// Here are a few additional scenarios which use the new API 
// for anyone stumbling across this answer in the future
- var href = "/admin/rooms/delete/" + room.id;
a(href=href)
a(href=`${href}`) // Node.js/io.js ≥ 1.0.0
a(href=href + '?foo=bar')