admin管理员组文章数量:1391928
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.
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.
Share Improve this question edited Dec 12, 2011 at 23:22 Bo Persson 92.5k31 gold badges153 silver badges208 bronze badges asked Dec 12, 2011 at 22:45 Khurram IjazKhurram Ijaz 1,8645 gold badges24 silver badges43 bronze badges1 Answer
Reset to default 10You 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 e from the server as that's were they should be defined.
本文标签： phphow to associate id with table row delete button in backboneStack Overflow
版权声明：本文标题：php - how to associate id with table row delete button in backbone - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744680526a2619377.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论