Jade / Pug로 인라인 JavaScript를 렌더링하려면 어떻게해야합니까?

222

Jade (http://jade-lang.com/)를 사용하여 페이지에서 JavaScript를 렌더링하려고합니다.

내 프로젝트는 Express와 함께 NodeJS에 있으며 헤드에 인라인 JavaScript를 작성하기 전까지는 eveything이 올바르게 작동합니다. 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>

어떤 아이디어가 분명히 놓칠 수 있습니까?

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">.

— Vojto 2016 년

47

type="text/javascript"태그 의 type필드에 대한 기본값 <script>입니다. 설정할 필요가 없습니다.

— Adam Fabicki

멀티 라인 코드는 어떻습니까? Jade에 이런 식으로 임베드 될 때 Javascript에서 적절한 코드 들여 쓰기를하는 방법이 있습니까?

— missingfaktor

6

Jade의 정책이 변경되었습니다 .. 이제 인라인 스크립트 태그에 추가 해야합니다 . 따라서 script.들여 쓴 JS 블록이 이어집니다.

— joeytwiddle

4

이 예는 스크립트 삽입 취약점입니다. github.com/visionmedia/jade/issues/1474

— Jason Merrill

104

:javascript필터에서 제거 7.0

문서는 말한다 당신이 사용해야 scripta로 이어 지금 태그, .문자없이 앞의 공간을.

예:

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>

— 펠리페 사 비노
소스

모든 자바 스크립트 블록에서 점이있는 태그 스크립트는 줄 바꿈없이 렌더링 할 수있는 방법이 있습니까?

— Joaquinglezsantos

@Joaquinglez 내가 알지 못함

— Felipe Sabino

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")
  }

— 올리비에 C
소스

6

나는 추천한다 .. 그렇지 않으면 |각 줄 에 작성해야합니다 .

— Ilyas karim

2

답변의 세 번째 버전 :

다음은 인라인 Jade Javascript의 여러 줄 예입니다. 나는 당신이 그것을 사용하지 않고 그것을 쓸 수 있다고 생각하지 않습니다 -. 이것은 내가 부분적으로 사용하는 플래시 메시지 예제입니다. 도움이 되었기를 바랍니다!

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

질문에서 코드를 컴파일하려고하는 코드입니까?

그렇다면 두 가지가 필요하지 않습니다. 먼저 자바 스크립트 / 스크립트라고 선언 할 필요가 없으며 입력 후 코딩을 시작할 수 있습니다 -. 당신이 입력 한 후 두 번째, -if당신은 입력 할 필요가 없습니다 {또는 }중 하나. 그것이 Jade를 매우 달콤하게 만드는 것입니다.

-------------- 아래의 원래 답변 ---------------

다음 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/

— 존 앨런
소스

고맙습니다 John은 홀수 한 줄에 이것을 사용했지만 '-'를 앞에 두지 않고 여러 줄을 수행하는 것을 볼 수는 없습니다. 제이드 홈페이지 ( 링크 는 내가하려는 일의 예를 보여 주지만 컴파일되지는 않습니다. 최신 릴리스도 사용하고 있습니다.

— JMWhittaker

그렇다면 한 줄 아래에 여러 줄의 Javascript 코드를 사용하는 방법을 묻고 있습니까?

— JohnAllen

@Bluey 여기에서도 동일하게 작동하지 않습니다. github 문제에 대해 문의해야합니다.

— Mark

마크, 이제 옥 대신 샘 스티븐슨의 에코를 사용하기로 옮겼습니다. 테스트를위한 빠른 UI로 jade 만 사용하고있었습니다.

— JMWhittaker

Jade 0.12.4를 사용하면 JS 앞에-를 추가하지 않고 script () 할 수 있습니다.

— Richard Holland

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에 나와 있지 않으므로 지원하십시오 . 부끄러운 일입니다!

— Chris B

예, 좋았을 것입니다. 최고 답변에서 알 수 있듯이, script.작품은 잘 작동하며 합법적입니다!!! 5

— aaaidan

0

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

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

— 랜섬웨어 0
소스