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

As of this writing I don’t believe there’s a way to it. See this issue:
https://github.com/visionmedia/jade/issues/198

I ended up dropping into raw HTML to solve it, using the | prefix.