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

Question

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

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

• How to pass value to a onclick function in (Jade)pug?

如下面的Pug Github问题所述，

• Pass Object from Jade to function

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 + '"' + ')')

The linked question now covers this in an answer。