web-dev-qa-db-ja.com

Jade / Pugを使ってインラインJavaScriptをレンダリングする方法を教えてください。

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.jsexpresspug
208
JMWhittaker

単にドットの後に 'script'タグを使用してください。

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

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

342
liangzan

:javascriptフィルタは version 7. で削除されました

docs says あなたは今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>
98
Felipe Sabino

指定されたタイプのscriptタグを使用してください。ドットの前にそれを含めるだけです。

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

これは次のようにコンパイルされます。

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

スクリプトタグのみを使用することはできません。

|による解決策：

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

あるいは.を使って：

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

私の答えの3番目のバージョン：

これがインラインJade Javascriptの複数行の例です。 -を使わなくても書くことができるとは思いません。これは私が部分的に使用するフラッシュメッセージの例です。お役に立てれば！

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

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

そうであれば、2つのことは必要ありません。まず、それがJavascript /スクリプトであることを宣言する必要はありません。-と入力してからコーディングを開始できます。次に、-ifと入力した後は、{と}のどちらも入力する必要はありません。それがJadeをかなり甘いものにするものです。

--------------以下の元の答え---------------

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/example /

3
JohnAllen

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

Script、style、textareaなどのテキストのみを受け入れるタグには、先頭に「|」を付ける必要はありません。キャラクター

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

1
JPanneel

あなたの空白をチェックします。

JSファイルをインクルードとして持ち込むこともできます。何が問題なのかに対する答えではないことを私は知っていますが、どんなエラーでも実際のファイルの行番号を参照することになるので、あなたはあなたのJSをデバッグすることがより簡単であるとわかります。

1
Arcabard

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

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
0
Chris B
script(nonce="some-nonce").
  console.log("test");

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