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

Я пытаюсь получить JavaScript для рендеринга на моей странице с помощью Jade (http://jade-lang.com/)

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

Шаблон Jade

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

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

Ответы

Ответ 2

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

docs говорит, вы должны использовать тег 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>

Ответ 3

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

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

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

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

Ответ 4

Не использовать только тег script.

Решение с |:

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

Или с помощью .:

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

Ответ 5

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

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

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

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

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

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

Попробуйте добавить if с помощью -:

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

Также есть примеры Jade:

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

script(nonce="some-nonce").
  console.log("test");

//- Workaround
<script nonce="some-nonce">console.log("test");</script>