Як я можу відображати вбудований JavaScript за допомогою Jade / Pug?

222

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

Мій проект знаходиться в NodeJS з Express, все працює правильно, поки я не захочу записати якийсь вбудований JavaScript в голову. Навіть беручи приклади з нефритових документів, я не можу змусити його працювати, що мені не вистачає?

Шаблон нефриту

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

— ліангзан
джерело

Гарне рішення, але воно дасть лише <script>замість <script type="text/javascript">.

— Войто

47

type="text/javascript"- це значення за замовчуванням для typeполя в <script>тегах. Не потрібно його встановлювати.

— Адам Фабіцький

А як з багаторядковим кодом? Чи є спосіб, коли вбудований у Jade таким чином належний відступ коду в моєму Javascript?

— зниклий фактор

6

Політика Джейда змінилася, тег сценарію вбудованого тепер повинен бути .доданий. Тож script.слід ваш відрізний блок JS.

— joeytwiddle

4

Цей приклад - вразливість сценарію для ін'єкцій. Дивіться github.com/visionmedia/jade/isissue/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(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

Також є тонни прикладів нефриту:

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

— ДжонАллен
джерело

Дякую, Джон використав це для непарного одиночного рядка, однак я не можу бачити, як робити кілька рядків, не попереджуючи його "-". Домашня сторінка Jade (у посиланні є навіть приклад того, що я намагаюся зробити, але вона не збирається. Я також використовую останній випуск.

— JMWhittaker

Отже, ви запитуєте, як кілька рядків коду Javascript нижче одного, якщо?

— ДжонАллен

@Bluey ж тут, я ніколи не змушував це працювати. Вам слід задати питання про github.

— Марк

Марк, зараз перейшли до використання Еко Сема Стівенсона замість Джейд. Я використовував лише нефрит як швидкий інтерфейс для тестування.

— JMWhittaker

Jade 0.12.4 дозволяє мені сценарій (), не попереджуючи JS з - під ним.

— Річард Голланд

1

Для багаторядкового вмісту нефрит зазвичай використовує "|", однак:

Теги, які приймають лише текст, такий як сценарій, стиль та текстові області, не потребують головних | характер

Це сказало, що я не можу відтворити проблему, яка виникає у вас. Коли я вставляю цей код у шаблон нефриту, він видає правильний висновок і запитує мене на попередження про завантаження сторінки.

— 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/… ), але це виглядає як чистий нефрит не підтримайте його, оскільки тут не вказано: 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
джерело