如何使用Jade / Pug渲染内联JavaScript？

222

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

这里肯定有什么想念的想法吗？

node.js express pug

— 约翰·希特克
source

3

.(type='text/javascript')

— Warface

1

!!! 5已弃用，您必须使用doctype html

— Joaquinglezsantos '16

369

只需在后面加上点号即可使用“脚本”标签。

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

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

— 梁赞
source

好的解决方案，但只会产生<script>而不是<script type="text/javascript">。

— Vojto 2012年

47

type="text/javascript"是标签上type字段的默认值<script>。您不需要进行设置。

— 亚当·法比基

那多行代码呢？以这种方式嵌入Jade时，是否可以在我的Javascript中使用适当的代码缩进？

— missingfaktor

6

Jade的政策已更改，内联脚本标记现在应该.附加了。因此script.紧跟着您的JS缩进块。

— joeytwiddle13年

4

该示例是脚本注入漏洞。参见github.com/visionmedia/jade/issues/1474

— Jason Merrill

104

将:javascript在移除过滤器7.0版本

的文件说，你应该用script现在的标签，随后.char和前面没有空间。

例：

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>

— 费利佩·萨比诺（Felipe Sabino）
source

在所有javascript块中，带点标记脚本之后，是否有任何方式可以不用换行符来呈现它？

— Joaquinglezsantos '16

@Joaquinglez我不知道

— Felipe Sabino

55

使用指定类型的脚本标记，只需将其包括在点号之前：

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

这将编译为：

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

— 斯蒂芬·贾里纳（Stefan Jarina）
source

1

只是script.将被罚款。

— NoobTW

24

仅不使用脚本标记。

解决方案|：

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

或使用.：

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

— 奥利维尔·C
source

6

我推荐.。否则，您将不得不|在每一行中编写。

— Ilyas karim

2

我的答案的第三个版本：

这是内联Jade Javascript的多行示例。我认为如果不使用，就无法编写它-。这是我部分使用的Flash消息示例。希望这可以帮助！

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

您是否正在尝试编译问题中的代码？

如果是这样，则不需要两件事：首先，您不需要声明它是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/examples/

— 约翰·艾伦
source

谢谢约翰将它用于单行，但是如果不加'-'，我将看不到做多行。Jade主页（链接甚至提供了我要执行的操作的示例，但无法编译。我也使用了最新版本

— 。– JMWhittaker

因此，您要问如何将多行Javascript代码放在一个以下？

— JohnAllen

@Bluey同样在这里，我从来没有得到这个工作。您应该在github问题上提问。

— 标记

马克（Mark）现在已改用山姆·斯蒂芬森（Sam Stephenson）的Eco代替玉。我只是将玉作为测试的快速用户界面。

— JMWhittaker

Jade 0.12.4允许我编写script（），而无需在JS前面加上-。

— 理查德·霍兰德

1

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

仅接受文本（例如脚本，样式和文本区域）的标签不需要前导| 字符

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

— JPanneel
source

0

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

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

— 克里斯·B
source

@aaaidan你是对的。它由Scalate支持（我在这里使用它没有任何问题：github.com/cb372/phone-home/blob/master/src/main/webapp/WEB-INF/…），但看起来像纯Jade并没有支持它，因为未在此处列出：github.com/visionmedia/jade#features。真可惜！

— 克里斯·B

是的，应该很好。正如最高答案所说，这是一项script.很好的工作，而且是合法的!!! 5

— aaaidan

0

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

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

— 勒索软件0
source