I have been tryinng to call a function on button click in handlebars view, but unable to do so.
Now, I am new to it and maybe somehow missing the obvious. would love some help on this.
basically, it's a table which I am creating dynamically, but unable to call the function on button click.
here's the relevant code inside calendar.hbs
{{#each events}}
<tr>
<td>{{this.subject}}</td>
<td>{{this.start.dateTime}} ({{this.start.timeZone}})</td>
<td>{{this.end.dateTime}} ({{this.end.timeZone}})</td>
<td>
<ul class="list-unstyled">
{{#each this.attendees}}
<li class="border p-1" title="{{this.emailAddress.address}}">
{{this.emailAddress.name}}
</li>
{{/each}}
</ul>
</td>
<td>{{this.location.displayName}}</td>
<td><button onclick="editEvent({{this}})" >Edit</button></td>
</tr>
{{/each}}
</tbody>
and I have put the function in layout.hbs inside script tag like this
<script>
function editEvent(val){
return function(e){
console.log('val : ',val);
}
}
</script>
but I still get an error saying "Uncaught SyntaxError: Unexpected identifier"
please tell me where am I going wrong.
now, I also tried doing it in app.js like this
hbs.registerHelper("editEvent", function(event) {
console.log('event : ',event);
});
and then used in in calendar.hbs like Edit
and it was working I could see it in the console. but the problem was that it seemed to be calling the function on load and it kind of was automatically calling the function for all rows of the table on load... which I dont want.
so, what is the best way to do it?
EDIT: I looked at the html there and it shows up like this okay, I looked at it and it's showing up as
<td><button onclick="editEvent([object Object])" >Edit</button></td>
not sure how to fix it though.
I am not sure why you marked it as duplicate. The questions linked to - dont answer the question I have . But if you do feel that my question is answered here, then please at least send me a message with how to fix my problem.
