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

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

209 голосов
/ 02 мая 2011

Я пытаюсь заставить 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>

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

Ответы [ 8 ]

343 голосов
/ 27 июля 2011

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

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

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

99 голосов
/ 14 октября 2013

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

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

Пример: 

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>
47 голосов
/ 05 апреля 2014

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

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

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

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
22 голосов
/ 21 января 2017

Не использовать только тег сценария.

Решение с |: 

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

Или с .: 

script.
  if (10 == 10) {
    alert("working")
  }
3 голосов
/ 02 мая 2011

ТРЕТЬЯ ВЕРСИЯ МОЕГО ОТВЕТА:

Вот многострочный пример встроенного 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/

1 голос
/ 23 августа 2011

Я бы проверил ваши пробелы.

Также вы можете внести свой JS-файл в список включенных. Я знаю, что это не ответ на вопрос, что идет не так, но вам будет проще отлаживать JS, поскольку все ошибки заканчиваются ссылкой на номер строки в файле, который является действительным.

1 голос
/ 30 мая 2011

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

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

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

0 голосов
/ 26 мая 2013

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

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
...