在胡子模板中对单击事件执行函数 [英] Executing function on a click event in a mustache template

问题描述

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

I have a page that is driven by a mustache template (along with javascript and jquery), and I can't figure out how to insert a function into this template. Essentially what I want is to add a link or button to the page that executes a function, "onTaskSelected(taskId)", when the user clicks on it. I've been searching for a way to accomplish this for several days now, and extensive mustache documentation/support/examples are woefully hard to find. Does anyone know how this could be accomplished?

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

Edit - Here is some of the code that I've tried:

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

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

Data gets loaded into the mustache template, which has the following within it:

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

我已将代码调试到数据发送到模板以转换为html的位置，B8已正确设置changeTask和taskId。但是，在显示html时，按钮看起来像这样：

I've debugged the code to the point where data gets sent to the template to be converted to html, and B8 has set both changeTask and taskId correctly. However, by the time the html is displayed, the button looks like this:

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

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

Why is the onclick getting zapped, and how can I fix it? It doesn't need to be a button, but I do need a clickable element on the page with that text.

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

Update: I have since updated my template as follows:

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

显然我需要嵌套我的数据模板才能访问<$ c $中的变量c> B8 对象。但是，现在我遇到的问题是它在从模板创建html时尝试执行 changeTask 函数。我怎么能让它等到执行直到我点击按钮？

Apparently I needed to nest my data templating in order to access the variables inside the "B8" object. However, now the problem I have is that it's trying to execute the "changeTask" function when it creates the html from the template. How can I get it to wait to execute until I click the button?

推荐答案

终于搞定了，但我最终走了一条完全不同的路线。想在这里张贴以防万一其他人有同样的问题。我格式化胡子给按钮一个名字，而不是尝试插入onClick方法，然后我使用jquery循环遍历DOM的那个部分中的每个按钮，并将onClick方法添加到具有正确名称的按钮。

Finally got it working, but I ended up going a completely different route. Wanted to post it here in case anyone else had the same problem. I formatted the mustache to give the button a name rather than try to insert the onClick method, then I cycled through every button in that section of the DOM using jquery and add an onClick method to the buttons that had the right names.

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

Technically I also changed my buttons to links, which I'll show in the code below, but it should also work for buttons as well.

模板：

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

jquery（部分示例）：

jquery (partial example):

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

希望这对其他人有帮助。

Hope that is helpful for others.

这篇关于在胡子模板中对单击事件执行函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！