StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POExecuting function on a click event in a mustache template
text
Body
copied!<p>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, "<code>onTaskSelected(taskId)</code>", 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?</p> <p>Edit - Here is some of the code that I've tried:</p> <pre><code>data["B" + task.taskId] = { changeTask : function(taskId) { var self = this; self.onTaskSelected(taskId); }, taskId : task.taskId }; </code></pre> <p>Data gets loaded into the mustache template, which has the following within it:</p> <pre><code><button onClick="{{#B8.changeTask}}B8.taskId{{/B8.changeTask}}">Change to task 8</button> </code></pre> <p>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:</p> <pre><code><button onclick>Change to task 8</button> </code></pre> <p>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.</p> <p>Update: I have since updated my template as follows:</p> <pre><code><button onClick="{{#B8}}{{#changeTask}}8{{/changeTask}}{{/B8}}">Change to task 8</button> </code></pre> <p>Apparently I needed to nest my data templating in order to access the variables inside the "<code>B8</code>" object. However, now the problem I have is that it's trying to execute the "<code>changeTask</code>" function when it creates the html from the template. How can I get it to wait to execute until I click the button?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload