如何使用 Jade / Pug 呈现内联 JavaScript？答案

【问题标题】：How can I render inline JavaScript with Jade / Pug?如何使用 Jade / Pug 呈现内联 JavaScript？
【发布时间】：2011-08-17 00:35:20
【问题描述】：

我正在尝试使用 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>

这里肯定有什么想法吗？

【问题讨论】：

您在(type='text/javascript') 之后缺少一个点.
!!! 5 已弃用，您必须使用 doctype html

标签： node.js express pug

【解决方案1】：

只需使用一个“脚本”标签，后面加一个点。

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

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

【讨论】：

很好的解决方案，但它只会产生<script> 而不是<script type="text/javascript">。
type="text/javascript" 是<script> 标签上type 字段的默认值。你不需要设置它。
多行代码呢？以这种方式嵌入 Jade 时，有没有办法在我的 Javascript 中进行适当的代码缩进？
Jade 的策略已更改，内联脚本标签现在应该附加一个 .。所以script. 后面跟着缩进的 JS 块。
那个例子是脚本注入漏洞。见github.com/visionmedia/jade/issues/1474

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

这将编译为：

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

【讨论】：

只要script. 就可以了。

【解决方案4】：

仅不使用脚本标签。

| 的解决方案：

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

或者.:

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

【讨论】：

我推荐.。否则你必须在每一行写|。

【解决方案5】：

:javascript 过滤器已在 version 7.0 中删除

您现在应该使用script 标记docs says，后跟. 字符且前面没有空格。

例子：

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 块中是否有任何方法可以在没有换行符的情况下呈现它？
@Joaquinglez 我不知道

【解决方案6】：

使用: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。太可惜了！
是的，会很好。正如最佳答案所说，script. 工作正常，并且是合法的!!! 5

【解决方案7】：

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

只接受文本的标签，例如脚本、样式和文本区域不需要领先|人物

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

【讨论】：

【解决方案8】：

我的答案的第三个版本：

这是一个内联 Jade Javascript 的多行示例。我认为不使用- 就无法编写它。这是我在部分中使用的 Flash 消息示例。希望这会有所帮助！

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

您尝试获取的代码是否用于编译您的问题中的代码？

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

【讨论】：

感谢约翰将其用于奇数的单行，但是我无论如何都看不到在不加“-”的情况下执行多行。 Jade 主页（link 甚至有一个我正在尝试做的示例，但它不会编译。我也在使用最新版本。
所以你问的是如何让多行 Javascript 代码低于一行？
@Bluey 同样在这里，我从来没有得到这个工作。你应该在 github 问题上提问。
马克，现在已经开始使用 Sam Stephenson 的 Eco 而不是 Jade。我只是将jade用作测试的快速UI。
Jade 0.12.4 允许我在没有在 JS 下方添加 - 的情况下编写脚本（）。