javascript - 在 mustache 模板中的点击事件上执行函数

Question

我有一个由 mustache 模板(以及 javascript 和 jquery)驱动的页面，但我不知道如何将函数插入到该模板中。本质上，我想要的是在用户单击时向执行函数“onTaskSelected(taskId)”的页面添加链接或按钮。几天来我一直在寻找一种方法来实现这一点，但是很难找到大量的 mustache 文档/支持/示例。有谁知道这是如何实现的？

编辑 - 这是我试过的一些代码:

data["B" + task.taskId] = {
    changeTask : function(taskId) {
        var self = this;
        self.onTaskSelected(taskId);
    },
    taskId : task.taskId
};

数据被加载到 mustache 模板中，其中包含以下内容:

<button onClick="{{#B8.changeTask}}B8.taskId{{/B8.changeTask}}">Change to task 8</button>

我已将代码调试到将数据发送到模板以转换为 html 的地步，并且 B8 已正确设置 changeTask 和 taskId。然而，在显示 html 时，按钮看起来像这样:

<button onclick>Change to task 8</button>

为什么 onclick 会中断，我该如何解决？它不需要是一个按钮，但我确实需要页面上带有该文本的可点击元素。

更新:我已经更新了我的模板如下:

<button onClick="{{#B8}}{{#changeTask}}8{{/changeTask}}{{/B8}}">Change to task 8</button>

显然我需要嵌套我的数据模板，以便访问“B8”对象中的变量。但是，现在我遇到的问题是它在从模板创建 html 时试图执行“changeTask”函数。我怎样才能让它等到我点击按钮后才执行？

Answer 1

终于让它工作了，但我最终走了一条完全不同的路线。想把它贴在这里以防其他人遇到同样的问题。我对 mustache 进行了格式化，为按钮命名，而不是尝试插入 onClick 方法，然后我使用 jquery 遍历 DOM 该部分中的每个按钮，并向具有正确名称的按钮添加 onClick 方法。

编辑:从技术上讲，我还将我的按钮更改为链接，我将在下面的代码中显示，但它也应该适用于按钮。

模板:

<a name="{{{B8}}}">Change to task 8</a>

jquery(部分示例):

$('a[name="' + buttonData[B8].name + '"]').click(function() {
    self.onTaskSelected(buttonData[B8].taskId); 
});

希望对其他人有帮助。