如何使用Jade渲染内联JavaScript?

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

我的项目是使用Express的NodeJS,eveything正常工作,直到我想写一些内联JavaScript的头。 即使从翡翠文件中拿来的例子,我不能得到它的工作,我错过了什么?

玉模板

!!! 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> 

有些事情肯定会在这里错过任何想法?

简单地使用一个“脚本”标记与点之后。

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

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

:javascript 版本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> 

使用指定types的脚本标记,只需在点之前包含它:

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

这将编译为:

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

想对梁山的回答发表评论,但是没有足够的声望。 希望这可以帮助

没有使用脚本标签只。

|解决scheme :

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

或者与一个.

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

我的回答的第三版:

这是一个内联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 

Jade的例子还有很多:

https://github.com/visionmedia/jade/blob/master/examples/

对于多行内容,玉石通常使用“|”,但是:

只接受脚本,样式和textarea等文本的标签不需要前导| 字符

这就是说,我不能重现你遇到的问题。 当我将这段代码粘贴到一个翡翠模板中时,它会产生正确的输出,并在页面加载时提示我一个提示。

我会检查你的空格。

你也可以把你的JS文件作为包含。 我知道它不是一个错误的答案,但你会发现更容易debugging你的JS,因为任何错误最终引用一个真实的文件中的行号。

使用:javascriptfilter。 这将生成一个脚本标签并以CDATA格式转义脚本内容:

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