我如何用Jade / Pug渲染内联JavaScript ?

我试图让JavaScript渲染在我的页面上使用Jade (http://jade-lang.com/)

我的项目是在NodeJS与Express，一切都是正常工作，直到我想在头部写一些内联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>

这里肯定遗漏了一些东西有什么想法吗?

254308 次浏览
小开

我回答的第三个版本:

下面是一个内联Jade Javascript的多行示例。我不认为你可以不使用-来编写它。这是我在部分中使用的一个flash消息示例。希望这能有所帮助!

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

你试图得到的代码是编译你问题中的代码吗?

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

小开

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

只接受文本的标签 脚本、样式和文本区域没有 需要|开头字符

话虽如此，我无法重现你遇到的问题。当我在jade模板中粘贴该代码时，它会产生正确的输出，并在页面加载时提示我一个警报。

小开

简单地使用“script”标签后加一个点。

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

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

小开

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

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

: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>
小开

使用指定类型的script标签，简单地将它包含在点之前:

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

这将编译为:

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

不使用脚本标记。

|的解决方案:

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

或者使用.:

script.
if (10 == 10) {
alert("working")
}
小开 
script(nonce="some-nonce").
console.log("test");


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

提交答案