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 bu

Answer 1

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 2

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.

Answer 3

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 4

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