CODEWITHSUNDEEP
backbone.jsunderscore.js
beNerd
beNerd

Reputation: 3374

How to architecture backbonejs application - click event on each table row backbonejs

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.

Upvotes: 1

Views: 1065

Answers (2)

opensas
opensas

Reputation: 63485

I'm also developing a backbone application for the first time and went thru exactly the same mistake.

I first I just tried to translate my php / asp / ruby / whatever_server_side_template_technology into underscore templates, and got something pretty much like what you had.

Now I can realize it's a mistake. You should use subviews. The events and the associated model will be connected to that subview. Pretty soon you'll have lots of view listening to events and updating themselves when data changes, but if you're carefull it will be ok.

Here's a demo app I'm working on: https://bb-jugar.rhcloud.com/index.html#Wine and here's the github repo: https://github.com/opensas/BackboneBootstrap

This is how I solved it: https://github.com/opensas/BackboneBootstrap/blob/master/demoapp/js/src/views/crud/RowsView.js

Upvotes: 0

Simon Boudrias
Simon Boudrias

Reputation: 44619

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.

Upvotes: 4

Related Questions