How To Make Jade Stop Html Encoding Element Attributes, And Produce A Literal String Value?

UPDATE Jade v0.24.0 fixes this with a != syntax for attributes. option(value!='<%= id %>') I'm trying to build an with jade, where the value of the option is

Solution 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

Solution 2:

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 =>') Clickyclicky...

Solution 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.

Solution 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.

- varcheckType= 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.