templates - How to make Jade stop HTML encoding element attributes, and produce a literal string value?

Question

UPDATE Jade v0.24.0 fixes this with a != syntax for attributes. option(value!='<%= id %>')

---

I'm trying to build an <option> with jade, where the value of the option is an UnderscoreJS template marker: <%= id %> but I can't get it to work because jade is converting my marker text to <= id >.

Here's my Jade markup:

script(id="my-template", type="text/template")
  select(id="type")
    <% _.each(deviceTypes, function(type){ %>
    option(value='&lt;%= type.id %>') <%= type.name %>
    &lt;% }) %>

I expect it to produce this html:

<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="<%= type.id %>"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>

But what I get instead, is this:

<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="&lt;%= type.id %&gt;"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>

Note the very subtle difference in the <option> line of the output... the value attribute of the option has been HTML encoded.

How do I prevent Jade from HTML encoding this value? I need it to produce the literal value, the same way it does with the text of the option.

Answer 1

Derick has already mentioned that Jade added new feature for unescape HTML encoding in update, but I'd like to add some addendum for someone who might not recognize.

- var html = "<script></script>"
| !{html} <-- Escaped
| #{html} <-- Encoded

from https://github.com/visionmedia/jade