[英]Backbone event click on table row
我为表格行创建了一个视图,我想听听该行中任何单元格的单击。 这就是我的实现方式:
let ListItem = Backbone.View.extend({
events: {
'click tr': 'showDetails',
'click': 'showDetails'
},
template: function() {
return "<tr><td><img src=<%= imageUrl %> /></td><td class='name'><%= firstName %></td><td><%= lastName %></td><td><%= homeTown %></td><td><button type='button' id='ddd' class='btn btn-danger'>Delete</button></td></tr>";
},
render: function() {
var oTemplate = _.template(this.template());
this.$el.html(oTemplate(this.model.toJSON()));
$('table > tbody:last-child').append(this.$el.html());
return this;
},
showDetails: function() {
alert("*****");
},
hide: function(bToHide, index) {
index++;
if (!bToHide) {
$($('tr')[index]).show();
return;
}
$($('tr')[index]).hide();
this.rendered = true;
},
openActorView: function() {
window.open('/#actor/' + window.actorsCollection.indexOf(this.model), '_self');
}
});
单击其中的行\\单元格后,没有任何反应。 我听点击此视图+点击tr,但是什么也没有发生。
另外,当将事件添加到tr td
不会发生任何事情。
感谢您的帮助
$('table > tbody:last-child').append(this.$el.html());
因此,您正在创建一个易于定义的事件侦听器的不错的Backbone视图,然后不使用它,只需获取其字符串表示形式并将其转储到DOM中,就不会丢失以前绑定的任何事件侦听器。
首先,无需使模板具有功能,只需直接使用_.template
。 我写了另一个答案,其中提供了有关如何使用_.template
其他信息。
之后, 请勿在视图内使用全局选择器。 它扼杀了作用域组件视图的目的。 让父视图类处理这个问题。
let ListItem = Backbone.View.extend({
tagName: 'tr', // the list item is a `<tr>`
events: {
'click': 'showDetails'
},
template: _.template("<td><img src=<%= imageUrl %> /></td><td class='name'><%= firstName %></td><td><%= lastName %></td><td><%= homeTown %></td><td><button type='button' id='ddd' class='btn btn-danger'>Delete</button></td>"),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
showDetails: function() {
console.log("show details event");
}
});
制作一个管理表的列表视图。 这是将列表项放入DOM的父类。
代替使用jQuery核心功能,而使用Backbone视图作用域别名this.$()
来缓存表主体。
let ListView = Backbone.View.extend({
initialize: function() {
this.$body = this.$('tbody');
},
render: function() {
this.$body.empty();
this.collection.each(this.renderItem, this);
return this;
},
renderItem: function(model) {
var view = new ListItem({ model: model });
this.$body.append(view.render().el); // use the DOMElement
}
});
然后从视图外部传递现有表。
new ListView({ el: 'table.my-table' }).render();
这是一个非常基本的示例,您应该意识到可以进一步提高性能,如果按原样使用它可能会泄漏内存。
了解如何使用Backbone提高列表呈现性能 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.