248

我正在尝试使用 Jade (http://jade-lang.com/) 让 JavaScript 在我的页面上呈现

我的项目是在带有 Express 的 NodeJS 中，一切都正常工作，直到我想在头脑中编写一些内联 JavaScript。即使从 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>

绝对是这里的一些东西有什么想法吗？

4

8 回答 8

400

只需使用后面带有点的“脚本”标签。

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

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

于 2011-07-27T01:59:41.733 回答
114

过滤器在7.0 版中:javascript被移除

文档说您现在应该使用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>
于 2013-10-13T21:20:38.717 回答
62

使用指定类型的脚本标签，只需在点之前包含它：

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

这将编译为：

<script type="text/javascript">
  if (10 == 10) {
    alert("working");
  }
</script>
于 2014-04-05T11:48:57.587 回答
28

仅不使用脚本标签。

解决方案|：

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

或使用.：

script.
  if (10 == 10) {
    alert("working")
  }
于 2017-01-21T07:29:39.243 回答
3

我的答案的第三个版本：

这是内联 Jade Javascript 的多行示例。我不认为你可以不使用-. 这是我在部分中使用的 Flash 消息示例。希望这可以帮助！

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

您尝试获取的代码是编译问题中的代码吗？

如果是这样，你不需要两件事：第一，你不需要声明它是 Javascript/a 脚本，你可以在输入后开始编码-；其次，在你输入之后你-if不需要输入{or }。这就是让 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/

于 2011-05-02T17:00:52.817 回答
1

对于多行内容，jade 通常使用“|”，但是：

仅接受文本（如 script、style 和 textarea）的标签不需要前导 | 特点

这就是说，我无法重现您遇到的问题。当我将该代码粘贴到玉模板中时，它会产生正确的输出并在页面加载时提示我警报。

于 2011-05-30T13:16:11.843 回答
1 
script(nonce="some-nonce").
  console.log("test");

//- Workaround
<script nonce="some-nonce">console.log("test");</script>
于 2019-08-22T00:15:04.263 回答
0

使用:javascript过滤器。这将生成一个脚本标记并将脚本内容转义为 CDATA：

!!! 5
html(lang="en")
  head
    title "Test"
    :javascript
      if (10 == 10) {
        alert("working")
      }
  body
于 2013-05-26T10:54:38.753 回答