Menu
I am new to backbone.js below is my code all I need is syntax/code required in backbone.js to produce unique id in every row of my table so that when delete gets pressed I delete that specific row from the table.
$(function(){
var Person = Backbone.Model.extend({
id: 0,
name: 'default name',
age: 100
});
var PersonCollection = Backbone.Collection.extend({
model: Person
});
var PersonView = Backbone.View.extend({
el: $('#personEL'),
events:
{
"click #login-btn" : "loginClick"
},
loginClick: function()
{
var name = $('#name').val();
var age = $('#age').val();
var newPerson = new Person({id: 1,name: name, age : age});
this.personCollection.add(newPerson);
var showit = new zview({model: newPerson});
},
initialize: function(){
this.personCollection = new PersonCollection();
this.render();
},
render: function()
{
var template = _.template( $("#personInputTemplate").html(), {} );
this.el.html(template);
return this;
}
});
zview = Backbone.View.extend({
el: $('#personTable'),
events:{
'click #delete' : 'deleteItem'
},
initialize: function()
{
this.render();
return this;
}
,
render: function()
{
var template = _.template( $('#personDisplayTemplate').html(), this.model.toJSON() );
console.log(template);
$(this.el).append(template);
}
,
deleteItem: function()
{
console.log('delete');
}
});
var persons = new PersonView();
});
html:
<body>
<script type="text/template" id="personInputTemplate">
<p>Person Name<input type="text" id="name" /></p>
<p>Person Age<input type="text" id="age" /></p>
<p><button id="login-btn">Save</button></p>
</script>
<script type="text/template" id="personDisplayTemplate">
<tr>
<td><span><%= name ? name : '' %></span></td>
<td><span><%= age ? age : '' %></span></td>
<td><a href="#" id="<%= id ? id : '' %>" class="delete"> Delete</a> </label></td>
</tr>
</script>
<div id ="personEL"></div>
<div id="showPerson"></div>
<div id="display">
<table id="personTable">
</table>
</div>
Any help, advise, code is appreciated.
296
You don't need to mess around with ids for this. Your event handlers get passed an event object and that has a target property and, for a click event, the target will be the DOM element that was clicked. Something like this should do the trick:
deleteItem: function(ev) {
var $tr = $(ev.target).closest('tr');
// Now $tr is the jQuery object for the <tr> containing the .delete
// element that was clicked.
$tr.remove();
}
Also, your template (correctly) uses class="delete" for the delete link but your event is bound to the element with id="delete"; you'll want to fix your events as well:
events: {
'click .delete': 'deleteItem'
}
Furthermore, you have a stray </label> in your delete link and you can probably drop the id attribute altogether; just this should be fine:
<td><a href="#" class="delete">Delete</a></td>
If you do need the ids then I'd use a data attribute on the <tr>:
<tr data-id="<%= id ? id : '' %>">
and then you could use $tr.data('id') to access it. Attaching it to the <tr> makes it easy to find from anywhere within the row and using a data attribute avoids duplicating HTML id attributes and ending up with invalid HTML. The id values should come from the server as that's were they should be defined.
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
