Как заставить Jade останавливать атрибуты элементов HTML-кодирования и создавать строковое значение?

UPDATE Jade v0.24.0 исправляет это с помощью синтаксиса != для атрибутов. option(value!='<%= id %>')

Я пытаюсь создать <option> с jade, где значение параметра является маркером UnderscoreJS: <%= id %>, но я не могу заставить его работать, потому что jade преобразует текст моего маркера в <= id >.

Здесь моя разметка нефрита:

script(id="my-template", type="text/template")
  select(id="type")
    &lt;% _.each(deviceTypes, function(type){ %>
    option(value='&lt;%= type.id %>') <%= type.name %>
    &lt;% }) %>

Я ожидаю, что он создаст этот html:

<script id="my-template" type="text/template">
  <select id='type'>
    <% _.each(deviceTypes, function(type){ %>
    <option value="<%= type.id %>"> <%= type.name %> </option>
    <% }) %>
  </select>
</script>

Но вместо этого я получаю следующее:

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

Обратите внимание на очень тонкую разницу в строке <option> вывода... атрибут value параметра был закодирован в HTML.

Как предотвратить Jade от HTML, кодирующего это значение? Мне нужно, чтобы оно выдавало буквальное значение, так же, как и с текстом опции.

Ответ 1

С этого момента я не верю, что есть способ. См. Эту проблему: https://github.com/visionmedia/jade/issues/198

В итоге я попал в необработанный HTML, чтобы решить эту проблему, используя | Приставка.

Ответ 2

Derick уже упомянул, что Jade добавил новую функцию для unescape HTML-кодирования при обновлении, но я хотел бы добавить какое-то дополнение для тех, кто может не распознать.

- var html = "<script></script>"
| !{html} <-- Escaped
| #{html} <-- Encoded

из https://github.com/visionmedia/jade

Ответ 3

Эта функция была добавлена в Jade. Вы просто используете оператор !=, если хотите значения атрибута unescape:

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

Ответ 4

Итак, у меня возникла проблема, подобная этому, где я хотел создать шаблон подчёркивания в одном из моих представлений Jade. Часть шаблона Underscore должна была установить атрибут selected в теге <option>.

Сначала я попробовал вернуть Underscore "selected" или ". К сожалению, Jade не имеет способа отобразить атрибут без значения и не имеет способа присвоения имен без экранирования (возвращались биты Underscore без кавычек).

К счастью, вы можете unescape значение атрибута, сохраняя кавычки.

В этом примере я выбираю значение раскрывающегося списка на основе типа владельца, соответствующего строковому значению. Я устанавливаю вспомогательную функцию, поэтому мне не придется вручную удалять кавычки.

- 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

По мнению некоторых, вы можете использовать !{} здесь, чтобы полностью избежать кодирования (<, >, etc.), однако это не сработало в моей версии Jade. Я использую "^0.30", а текущая версия 1.x.

Если кто-то может проверить, что !{} работает в этой ситуации, используя последнюю версию Jade, я обновляю свой ответ.