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

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.

Answer 2

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

Answer 3

This feature has been added to Jade. You simply use the != operator if you want to unescape attribute values:

script#my-template(type='text/template')
  a(href!='<%= url =>') Clicky clicky...

Answer 4

So I was having an issue similar to this, where I wanted to create an Underscore template inside one of my Jade views. A piece of the Underscore template needed to set the selected attribute in an <option> tag.

Initially I tried having Underscore return "selected" or "". Unfortunately, Jade doesn't have a way to display an attribute with no value and doesn't have a way of non-escaping attribute names (the Underscore bits were coming back without quotation marks).

Luckily, you are able to unescape the value of an attribute, preserving the quotation marks.

In this example, I'm selecting a value of a dropdown based on the owner type matching a string value. I set a helper function so I wouldn't have to manually escape quotation marks.

- var checkType = function(type) { return "<%= contact.type == '" + type + "' %>" };

.clearfix
  label Title:
  .input
    select(type="text", name="contact[title]", class="new-title")
      option(value="") Choose Title
      option(value="manager", selected="#{ checkType('manager') }") Manager
      option(value="member", selected="#{ checkType('member') }") Member
      option(value="owner", selected="#{ checkType('owner') }") Owner
      option(value="president", selected="#{ checkType('president') }") President
      option(value="individual", selected="#{ checkType('individual') }") Individual
      option(value="main_contact", selected="#{ checkType('main_contact') }") Main Contact

According to some, you should be able to use !{} here to completely avoid all encoding (<, >, etc.), however this did not work on my version of Jade. I'm using "^0.30" and the current version is 1.x.

If someone can verify that !{} does work in this situation using the latest version of Jade, I'll update my answer.