Как я могу рендерить встроенный 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
источник