Pug / Jade：onClick调用函数并传递参数

Question

此处的演示代码： https : //codepen.io/iShawnWang/pen/ZvBGRv

我想要的只是调用js函数并传递参数，
我已经尝试了以下答案，但是没有用

• 如何在（Jade）pug中将值传递给onclick函数？

正如下面的Pug Github问题中所讨论的，

• 将对象从Jade传递给函数

Event handlers like onclick can only be added through HTML or client-side JavaScript. This is not something Jade can help you with.

那么在Pug模板上添加onclick侦听器的最佳实践是什么？

Answer 1

我自己解决了： https : //github.com/pugjs/pug/issues/2933

a.postTitle(onclick=`viewPost(${JSON.stringify(file)})`)= file.name

然后，我可以在viewPost函数中收到一个对象， 注意`符号

Answer 2

那么在Pug模板上添加onclick侦听器的最佳实践是什么？

根据我自己的经验，我建议将带有事件处理程序逻辑的script标签添加到模板中，并声明onclick而不带有任何反引号，重音符号，字符串插值标记：

`

字符串插值标记将因某些UglifyJs构建步骤而失败（通常在Prod配置中很常见）：

this-will-${fail}-in-some-UglifyJs-versions

我的意思的示例如下所示：

// my template.pug

script
  function myFunction(varA, varB){
    // do something...
  }

- var someVar = "this is a string, but the value could come from anywhere, really"

div(onclick='myFunction(' + '"' + someVar + '"' + ',' + '"' + someVar + '"' + ')')

链接的问题现在在答案中涵盖了这一点 。