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

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

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

Вот моя разметка Jade:

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? Мне нужно, чтобы он выдавал буквальное значение, так же, как и с текстом опции.


string-literals templates pug underscore.js html-encode
person Derick Bailey    schedule 11.04.2012    source источник
comment
Недавно у меня была такая же проблема с установкой значений атрибутов с помощью подчеркивания, и я нашел обходной путь. Не очень красиво, но это лучше, чем использование необработанного HTML.   -  person AlbertEngelB    schedule 24.04.2014

Ответы (4)


arrow_upward
5
arrow_downward

На момент написания этой статьи я не верю, что есть способ. См. этот выпуск: https://github.com/visionmedia/jade/issues/198

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

person Kevin Dente    schedule 11.04.2012
comment
Спасибо, Кевин. Возврат к | пока все работает... жизнь на переднем крае... :P - person Derick Bailey; 11.04.2012
comment
Это не должен быть принятый ответ, см. ответ Minime. - person CatalinBerta; 23.11.2016

arrow_upward
103
arrow_downward

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

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

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

person Minime    schedule 03.10.2012
comment
(! && Minime) сделал мой день :) - person Matiss; 03.07.2013
comment
Согласно jade-lang.com/reference/code !{html} не экранируется и # {html} конвертирует объекты - person rndstr; 04.02.2015
comment
Это спасение жизни. - person Merhawi Fissehaye; 26.09.2019

arrow_upward
35
arrow_downward

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

script#my-template(type='text/template')
  a(href!='<%= url =>') Clicky clicky...
person Mike M. Lin    schedule 10.01.2013
comment
Это работает! Однако, похоже, это не работает для атрибутов класса. - person cgenco; 21.06.2013
comment
@cgenco так и должно быть, если ваша версия jade › 1.9.2 - person Codebling; 17.02.2015
comment
Я знаю - я исправил ;) - person cgenco; 19.02.2015

arrow_upward
0
arrow_downward

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

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

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

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

- 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, я обновлю свой ответ.

person AlbertEngelB    schedule 24.04.2014
comment
!{} работает в мопсе (новое имя Джейд) в v2.0.0-alpha8 - person Varun Chatterji; 05.06.2016