Backbonejs: get clicked model from collection - backbone.js

Question

define(['jquery', 'underscore', 'backbone', 'text!views/manageUsers.tpl', 'common'], function($, _, Backbone, tmpl_manageUsersView, ajax) {
/*
* Module list
*
* tmpl_page1View templates/tmpl_page1View.html
*/
var manageUsersView = Backbone.View.extend({
// Setting the view's template property using the Underscore template method
template: _.template(tmpl_manageUsersView),
// View constructor
initialize: function() {
self = this;
},
// View Event Handlers
events: {
},
// Renders the view's template to the UI
render: function() {
this.$el.html(this.template({data: this.templateData}));
user=Backbone.Model.extend({
defaults:{
name:"",
password:"",
isAdmin:false
},
});
users=Backbone.Collection.extend({
model:user,
url:"auth"
});
usersCollection=new users();
usersCollection.fetch({
error:function(response,xhr){
console.log(response);
},
success:function(response){
count=1;
_.each(data,function(d){
if(count%2==0)
$("#users>tbody").append("<tr class='odd'><td>"+count+"</td><td>"+d.username+"</td><td><a href='#' class='edit-iocn' id='edit_"+d.username+"' ></a><a class='ancrul delete-icon' id='delete_"+d.username+"'></a></td>");
else
$("#users>tbody").append("<tr class='even'><td>"+count+"</td><td>"+d.username+"</td><td><a href='#' class='edit-iocn' id='edit_"+d.username+"'></a><a class='ancrul delete-icon' id='delete_"+d.username+"'></a></td>");
count++;
});
/*--*/
var oTable = $('#users').dataTable({
"sDom": '<"bottom"<i>rtp<"clear">',
//"sDom":'<"top"ip>rt<"bottom"ip<"clear">',
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bPaginate": true,
"bInfo": true,
//"bAutoWidth": true,
"iDisplayLength":5,
"oLanguage": {
"sInfo": "",
"sInfoEmpty": ""
},
});
}
});
});
return manageUsersView;
});
Above is my code for getting data from url.
Following manageUsers.tpl file.
<div class="content">
<p> </p>
<h3></h3>
<div class="admin-login-area ui-corner-all">
<p class="validateTips">All form fields are required.</p>
<form id="addUserForm">
<fieldset>
<label for="name" class="login-label">User Name</label>
<input type="text" name="u-name" id="u-name" class="text ui-widget-content ui-corner-all">
<label for="name" class="login-label">Password</label>
<input type="password" name="p-name" id="p-name" class="text ui-widget-content ui-corner-all">
<label for="email" class="login-label">Retype Password</label>
<input type="password" class="text ui-widget-content ui-corner-all" id="c-name" name="c-name">
<input type="checkbox" id="isAdmin" />
<label>Is Admin</label>
<label class="login-label"></label>
<br/>
<input type="button" name="submit" id="submit" value="Submit" class="submit-btn">
<input type="button" name="submit" id="reset" value="Reset" class="submit-btn">
<input type="button" name="submit" id="cancel" value="Cancel" class="submit-btn">
<label class="login-label"></label>
</fieldset>
</form>
<!-- end admin login --></div>
<div class="table" >
<table width="100%" cellspacing="0" cellpadding="0" border="0" id="users">
<thead>
<th>Sr No</th>
<th>users</th>
<th>Actions</th>
</thead>
<tfoot style="display: table-header-group;">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
and on fetching data successfully i have filled table with collectios's data and on click of an item in table i want to retrive whole model.I have form and table in same tpl file
How to do that using backbonejs and underscore js?

Answer 1

First, add this event to your view :
events : {
'click .edit-iocn' : 'edit', // in your code you typed `iocn` instead of `icon`
'click .delete-icon' : 'delete'
}
Than change the ids to id='"+d.username+"' without the edit_ and delete_
And last the edit and delete methods :
edit: function(event) {
var username = event.currentTarget.id;
var user = usersCollection.where({name: username})[0];
...
}
delete: function(event) {
var username = event.currentTarget.id;
var user = usersCollection.where({name: username})[0];
...
}