Question

我有一个由胡子模板（以及javascript和jquery）驱动的页面，我无法弄清楚如何将函数插入到此模板中。基本上我想要的是当用户点击它时，向执行功能“onTaskSelected(taskId)”的页面添加一个链接或按钮。我一直在寻找一种方法来实现这一目标，并且很难找到大量的小胡子文档/支持/示例。有谁知道如何实现这一目标？

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

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

将数据加载到胡子模板中，其中包含以下内容：

<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

终于让它运转了，但我最终走的是完全不同的路线。想在这里张贴以防万一其他人有同样的问题。我格式化胡子给按钮一个名字，而不是尝试插入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+'"]')

希望将来能帮到你。

顺便说一下 - 我自己还在寻找解决原始问题的方法......

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

2 个答案: