Question

I am developing a application in which one of my template renders a table with n number of rows. Now in each row, i have a column with buttons like edit and delete.

When clicked on edit, a edit form appears in the same window in some div. That form needs to be populated with values fetched from backend.

Now nothing great in this.
My problem is this:

I have a view which renders the complete table using the following template structure:

<script type="text/template" id="ledgersing"> 

 <div class="span6 widget"> 
 <div class="widget-header"> 
 <span class="title">Ledgers</span> 
<button class="btn btn-danger pull-right" id="addLedgerButton">Add Ledger</button> 
</div> 

 <div class="widget-content"> 

 <table width="100%" class="table table-striped dataTable"> 
 <thead> 
 <tr><th>Name</th><th>Email</th><th>Phone</th><th>Action</th></tr> 
 </thead> 
<tbody> 
<% _.each(ledgers,function(data){ %>
<tr>
    <td><%= data.name %></td>
    <td><%= data.email %></td>
    <td><%= data.contact_number %></td>
    <td><span onClick="alert(<%= data.id %>)">x</span></td>
</tr>
<% }) %>
</tbody>

</table> 
</div> 

 </div> 


 </div >
 </script>

In this it just alerts a id when clicked on x. Now do i need to necessarily use onClick event like this? I mean that i will need the id in whatever construct i use for processing. What can be a better solution? I know backbonejs can handle this mess with ease if application is structured properly.
So essentially i want to know from experts, what will they do in such a scenario. How will they structure the application? I am novice to this frontend framework.

Answer 1

Instead of using _.each in your templates, I’d go with one view per table row as each one has some bit of complexity (edit, delete)

In these view, you use the events hash to register your DOM events. Never use onclick in your HTML, this is a really bad practice.

Don’t hesitate to look at the TodoMVC Backbone example for ideas on how to organize your app.