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

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