Khu*_*jaz 2 javascript php jquery backbone.js
我不熟悉backbone.js下面是我的代码我需要的是在backbone.js中需要的语法/代码,以便在我的表的每一行中产生唯一的id,这样当删除delete时我从表中删除该特定的行.
$(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>
任何帮助,建议,代码表示赞赏.
mu *_*ort 10
你不需要乱用ids.您的事件处理程序将传递一个事件对象,该事件对象具有一个target属性,对于单击事件,target它将是被单击的DOM元素.像这样的东西应该做的伎俩:
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();
}
此外,您的模板(正确)class="delete"用于删除链接,但您的事件绑定到元素id="delete"; 你也想要解决你的问题events:
events: {
'click .delete': 'deleteItem'
}
此外,您</label>的删除链接中有一个迷路,您可能id完全放弃该属性; 这应该没问题:
<td><a href="#" class="delete">Delete</a></td>
如果你确实需要ids,那么我将使用以下数据属性<tr>:
<tr data-id="<%= id ? id : '' %>">
然后你可以$tr.data('id')用来访问它.将其附加<tr>到可以从行中的任何位置轻松查找并使用数据属性可以避免重复HTML id属性并最终导致无效的HTML.这些id值应来自服务器,因为它们应该被定义.