Jade / PugでインラインJavaScriptをレンダリングするにはどうすればよいですか？

222

Jade（http://jade-lang.com/）を使用してページにJavaScriptをレンダリングさせようとしています

私のプロジェクトはExpressを備えたNodeJSにあり、headにインラインJavaScriptを記述したいまでeveythingは正しく機能しています。ジェイドのドキュメントの例をとっても、それが機能しないのですが、何が足りないのですか？

ヒスイのテンプレート

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

47

type="text/javascript"タグのtypeフィールドのデフォルト値です<script>。設定する必要はありません。

— アダムファビッキ

複数行コードはどうですか？この方法でJadeに埋め込んだときに、Javascriptで適切なコードインデントを設定する方法はありますか？

— missingfaktor 2013

6

Jadeのポリシーが変更され、インラインスクリプトタグが.追加されました。だから、script.JSのあなたのインデントブロックが続きます。

— joeytwiddle 2013

4

その例はスクリプトインジェクションの脆弱性です。github.com/visionmedia/jade/issues/1474

— Jason Merrill

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 2016

24

スクリプトタグのみを使用しないでください。

ソリューション|：

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

または.：

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

— オリビエC
ソース

6

お勧め.です。それ以外の場合は|、各行に書き込む必要があります。

— Ilyas karim 2017年

2

私の回答の第3版：

インラインJade Javascriptの複数行の例を次に示します。を使わずに書けるとは思いません-。これは、パーシャルで使用するフラッシュメッセージの例です。お役に立てれば！

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

あなたの質問のコードをコンパイルしようとしているコードはありますか？

その場合、2つのことは必要ありません。最初に、それがJavascript /スクリプトであることを宣言する必要はありません-。入力した後、コーディングを開始できます。あなたが入力した後、第2、-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/

— ジョンアレン
ソース

ジョンは奇数の単一行にこれを使用したことに感謝しますが、とにかく '-'を前に付けずに複数行を実行することはできません。ジェイドのホームページ（リンクはしても、私がやろうとしているが、それはコンパイルされませんものの例を持っている私も、最新のリリースを使用しています。。

— JMWhittaker

だからあなたは1行の下にJavascriptコードの複数の行をどのように持つべきか尋ねていますか？

— JohnAllen

@Blueyここでも同じです。これが機能することはありません。githubの問題について質問する必要があります。

— マーク

マーク、ジェイドの代わりにサムスティーブンソンのエコを使用するようになりました。私はテスト用のクイックUIとしてjadeのみを使用していました。

— JMWhittaker

Jade 0.12.4では、JSを前に付けずにscript（）を使用できます-その下。

— リチャードホランド

1

ただし、複数行コンテンツの場合、jadeは通常「|」を使用します。

スクリプト、スタイル、テキストエリアなどのテキストのみを受け入れるタグには、先頭を付ける必要はありません。キャラクター

これは言った、私はあなたが抱えている問題を再現することはできません。jadeテンプレートにそのコードを貼り付けると、正しい出力が生成され、ページの読み込み時にアラートが表示されます。

— JPanneel
ソース

0

:javascriptフィルターを使用します。これにより、スクリプトタグが生成され、スクリプトの内容がCDATAとしてエスケープされます。

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

— クリスB
ソース

@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 2013

0

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

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

— ランサムウェア0
ソース