In my Backbone / Underscore app, I have successfully rendered one template and implemented a method call "onclick" of a button. This function smoothly renders another template that contains another method call "onclick" for a button.
- #showTransportsTemplate: initial template with a "transport" model passed to it
- bookTicket(tid): a function that fetches the associated transport model using "tid" from the collection and sets them into a "booking model" passed on to the second template
- #confirmBookingTemplate: second template
- confirmBooking(): a method that is not recognized or called as expected
Here's the relevant part of app.js:
function bookTicket(tid)
{
alert("received tid: "+tid);
var transport = transportList.findWhere({id:tid});
console.log(transport);
var newBooking = new Booking();
newBooking.set('id',"b"+getBookingId());
newBooking.set('mode',transport.get('mode'));
newBooking.set('source',transport.get('source'));
newBooking.set('destination',transport.get('destination'));
newBooking.set('date',transport.get('date'));
newBooking.set('class',transport.get('class'));
newBooking.set('rate',transport.get('rate'));
var confirmBookingTemplate = _.template($('#confirmBookingTemplate').html(), {booking: newBooking});
alert(confirmBookingTemplate); // for testing purposes
$(confirmBooking.el).show();
$(confirmBooking.el).html(confirmBookingTemplate);
}
function confirmBooking()
{
alert("confirmBooking"); // no further code written coz this function is not getting called
}
The two templates:
<script type="text/template" id="showTransportsTemplate">
<table border="1">
<tr>
<th> Source </th>
<th> Destination </th>
<th> Date Available </th>
<th> Class </th>
<th> Rate </th>
<th> Book </th>
</tr>
<% _.each(selTransports, function (transport) {
var myid= transport.get("id");
%>
<tr>
<td align="center"> <%= transport.get("source") %> </td>
<td align="center"> <%= transport.get("destination") %> </td>
<td align="center"> <%= transport.get("date") %> </td>
<td align="center"> <%= transport.get("class") %> </td>
<td align="center"> <%= transport.get("rate") %> </td>
<td> <input type="button" onclick="bookTicket('<%= myid %>')" value="Book">
</input>
</td>
<td> <%= myid %> </td>
</tr>
<%
});
%>
</table>
</script>
<script type="text/template" id="confirmBookingTemplate">
<br /><br />
<h3> Booking Details </h3>
... [The remaining HTML code is omitted for brevity] ...
</script>
When testing in Chrome, I encountered an error stating "object is not a function", while Firebug specifies that "confirmBooking()" is not a recognized function although it already exists in the script.