Question

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

我的项目在NodeJS中使用Express，eveything正常工作，直到我想在头脑中编写一些内联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>

有些想法肯定会错过任何想法吗？

Answer 1

只需使用带有点后面的'script'标记。

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

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

Answer 2

:javascript

中删除了script过滤器

version 7.0您现在应该使用.标记，然后是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>

将编译为

{{1}}

Answer 3

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

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

这将编译为：

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

Answer 4

不使用脚本标记。

|的解决方案：

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

或使用.：

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

Answer 5

我的回答第三版：

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

还有大量的玉器示例：

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

Answer 6

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

仅接受文字的标签脚本，样式和textarea没有需要领先|字符

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

Answer 7

我会检查你的空白区域。

此外，您可以将您的JS文件作为包含。我知道它不是解决问题的答案，但你会发现调试你的JS更容易，因为任何错误最终都会引用真实文件中的行号。

Answer 8

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    welcomeMessage.text = "Hello Kotlin!"
    setContentView(R.layout.activity_main)

  }
}

Answer 9

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

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

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

玉模板

在浏览器中生成呈现的HTML

9 个答案: