Executing function on a click event in a mustache template

问题

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>

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>

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>

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?

回答1:

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.

Edit: 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.

template:

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

jquery (partial example):

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

Hope that is helpful for others.

回答2:

While your own answer is correct in essence, there is an easier option to select with jQuery:

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

Hope this helps u in the future.

Btw - I am myself still searching for a solution to the original problem...

来源：https://stackoverflow.com/questions/8419243/executing-function-on-a-click-event-in-a-mustache-template

标签

javascript

jquery

onclick

mustache