对小胡子模板中的单击事件执行函数

Question

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

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

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>

Why is the onclick getting zapped, and how can I fix it?它不需要是一个按钮，但我确实需要在页面上有一个带有该文本的可点击元素。

更新：我已经更新了我的模板，如下所示：

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

显然，我需要嵌套数据模板才能访问“B8”对象内的变量。然而，现在我遇到的问题是，它在从模板创建 html 时尝试执行“changeTask”函数。如何让它等待执行，直到我单击按钮？

Answer 1

终于成功了，但我最终走了一条完全不同的路。想将其发布在这里以防其他人遇到同样的问题。我格式化了小胡子以给按钮命名，而不是尝试插入 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); 
});

希望对其他人有帮助。

Answer 2

虽然您自己的答案本质上是正确的，但使用 jQuery 有一个更简单的选择：

$(link+'[name|="'+buttonData[B8].name+'"]')

希望这对您将来有所帮助。

顺便说一句 - 我自己仍在寻找原始问题的解决方案......