如何使用 Nunjucks 调用函数？答案

【问题标题】：How to call function using Nunjucks?如何使用 Nunjucks 调用函数？
【发布时间】：2021-11-01 10:23:50
【问题描述】：

我想使用 Nunjucks 在 HTML 中调用 jQuery 函数，但它给了我一个错误。我已经将 JS 文件导入到 HTML 文件中。

错误：无法调用未定义或错误的“fooName”

有人知道为什么我不能调用这个函数吗？这是我的代码示例：

<a class="btn" onclick="{{fooName(test)}}" href="#">Click me!</a>

$(document).ready(() => {
  const fooName = (name) => {
    console.log(`${this.name}`)
  };
});

【问题讨论】：

我对 nunjucks 不熟悉，但是您在 document.ready 事件处理程序内部定义 fooName 函数。因此，它超出了onclick 属性的范围，因为它调用的函数必须是全局可访问的。要解决此问题，您需要移动 document.ready 的 fooName() 函数 outside，或者删除 onclick 属性并使用 jQuery 绑定事件处理程序。我建议后者是更好的方法。

【解决方案1】：

我的情况有点不同，但我仍然认为它在这种情况下也有效

想法是给全局窗口对象添加一个函数

在将变量传递给 nunjucks 的视图渲染方法中，我添加了这个函数

var self = this;

window.onClick = function (id) {
 // self.fetchData(id);
 // Do something
}

在双节棍内

<a class="btn" onclick="window.onClick({{item.id}})">Click me!</a>

效果很好。

【讨论】：