Как я могу рендерить встроенный JavaScript с помощью Jade / Pug?

222

Я пытаюсь заставить JavaScript отображаться на моей странице, используя Jade (http://jade-lang.com/)

Мой проект находится в NodeJS с Express, все работает правильно, пока я не хочу написать несколько встроенных JavaScript в голове. Даже если взять примеры из Jade Docs, я не могу заставить его работать, что мне не хватает?

Нефритовый шаблон

!!! 5
html(lang="en")
  head
    title "Test"
    script(type='text/javascript')
      if (10 == 10) {
        alert("working")
      }
  body

Результирующий визуализированный HTML в браузере

<!DOCTYPE html>
<html lang="en">
<head>
  <title>"Test"</title>
  <script type="text/javascript">
    <if>(10 == 10) {<alert working></alert></if>}
  </script>
</head>
<body>
</body>
</html>

Что-то определенно не хватает здесь каких-либо идей?

node.js express pug JMWhittaker
источник
3
Вы пропустили точку .после(type='text/javascript')
Warface
1
!!! 5устарела, вы должны использоватьdoctype html
Joaquinglezsantos

Ответы:

369

просто используйте тег «script» с точкой после.

script.
  var users = !{JSON.stringify(users).replace(/<\//g, "<\\/")}

https://github.com/pugjs/pug/blob/master/examples/dynamicscript.pug

liangzan
источник
Хорошее решение, но оно будет производить только <script>вместо <script type="text/javascript">.
Войто
47
type="text/javascript"значение по умолчанию для typeполя в <script>тегах. Вам не нужно устанавливать это.
Адам Фабицки
Как насчет многострочного кода? Есть ли способ иметь правильный отступ кода в моем Javascript, когда встроен в Jade таким образом?
фактор
6
Политика Jade изменилась, теперь тег встроенного скрипта должен иметь .добавление. Итак, script.следом за вашим отступом блок JS.
Joeytwiddle
4
Этот пример - уязвимость внедрения скрипта. См. Github.com/visionmedia/jade/issues/1474
Джейсон Меррилл
104

:javascriptФильтр был удален в версии 7.0

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

Пример:

script.
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')

будет скомпилировано в

<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>
Фелипе Сабино
источник
Сценарий тега с точкой после, во всем блоке javascript есть ли способ, чтобы сделать его без перевода строки?
Joaquinglezsantos
@Joaquinglez не то, что я знаю
Фелипе Сабино
55

Используйте тег script с указанным типом, просто добавьте его перед точкой:

script(type="text/javascript").
  if (10 == 10) {
    alert("working");
  }

Это скомпилируется в:

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
Стефан Ярина
источник
1
просто script.было бы хорошо.
NoobTW
24

Не используйте только тег скрипта.

Решение с |:

script
  | if (10 == 10) {
  |   alert("working")
  | }

Или с .:

script.
  if (10 == 10) {
    alert("working")
  }
Оливье С
источник
6
Я рекомендую .. В противном случае вам придется писать |в каждой строке.
Ильяс
2

Третья версия моего ответа:

Вот многострочный пример встроенного Jade Javascript. Я не думаю, что вы можете написать это без использования -. Это пример флеш-сообщения, который я использую в частичном. Надеюсь это поможет!

-if(typeof(info) !== 'undefined')
  -if (info)
    - if(info.length){
      ul
        -info.forEach(function(info){
          li= info
      -})
  -}

Код, который вы пытаетесь получить, чтобы скомпилировать код в вашем вопросе?

Если это так, вам не нужны две вещи: во-первых, вам не нужно объявлять, что это Javascript / скрипт, вы можете просто начать писать код после ввода текста -; во-вторых, после ввода-if вам не нужно вводить {ни то, }ни другое. Вот что делает Джейд очень милой.

-------------- ОРИГИНАЛЬНЫЙ ОТВЕТ НИЖЕ ---------------

Попробуйте предваряя ifс -:

-if(10 == 10)
  //do whatever you want here as long as it's indented two spaces from
   the `-` above

Есть также множество примеров Jade на:

https://github.com/visionmedia/jade/blob/master/examples/

JohnAllen
источник
Спасибо, Джон использовал это для нечетной единственной строки, однако я не вижу возможности сделать несколько строк без добавления «-». Домашняя страница Jade ( ссылка даже содержит пример того, что я пытаюсь сделать, но она не скомпилируется. Я тоже использую последний выпуск.
JMWhittaker
Итак, вы спрашиваете, как сделать несколько строк кода Javascript ниже одной, если?
Джон Аллен
@ Синие же здесь, я никогда не заставлял это работать. Вы должны задать вопросы по GitHub.
Марк
Марк, теперь перешел к использованию Эко Сэма Стивенсона вместо Джейд. Я использовал только Jade в качестве быстрого интерфейса для тестирования.
JMWhittaker
Jade 0.12.4 позволяет мне использовать script (), не добавляя JS - ниже.
Ричард Холланд
1

Для многострочного контента Jade обычно использует «|», однако:

Теги, которые принимают только текст, такой как скрипт, стиль и текстовая область, не нуждаются в ведущей | персонаж

Тем не менее, я не могу воспроизвести проблему, которую вы имеете. Когда я вставляю этот код в шаблон Jade, он выдает правильный вывод и выдает предупреждение при загрузке страницы.

JPanneel
источник
0

Используйте :javascriptфильтр. Это сгенерирует тег сценария и экранирует содержимое сценария как CDATA:

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
Крис Б
источник
@aaaidan Ты прав. Он поддерживается Scalate (я использую его здесь без проблем: github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/… ), но, похоже, чистый Jade не поддержите это, поскольку это не перечислено здесь: github.com/visionmedia/jade#features . Это позор!
Крис Б.
Да, было бы хорошо. Как гласит верхний ответ, он script.работает нормально и законно!!! 5
aaaidan
0 
script(nonce="some-nonce").
  console.log("test");

//- Workaround
<script nonce="some-nonce">console.log("test");</script>
Ransomware0
источник