【问题标题】：Backbone event click on table row主干事件单击表格行
【发布时间】：2017-06-13 13:11:04
【问题描述】：

我为表格行创建了一个视图，我想听听对此行中任何单元格的任何点击。这就是我的实现方式：

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 添加事件时，以太没有任何反应。

感谢您的帮助

【问题讨论】：

我认为模板中的封闭标签被视图元素替换，所以如果你检查 DOM，你很可能不会在那里找到<tr>。尝试将视图元素指定为tr，如果您将事件哈希设置为'click td':...，它也不会受到影响
@vassiliskrikonis 每一行都有一个 tr 元素
你改成click td了吗？

标签： javascript jquery html backbone.js

【解决方案1】：

不起作用的原因

$('table > tbody:last-child').append(this.$el.html());

jQuery .html() function returns a string。

因此，您正在创建一个漂亮的 Backbone 视图，具有易于定义的事件侦听器，然后您不使用它，您只需获取其字符串表示并将其转储到 DOM 中，丢失之前绑定的任何事件侦听器.

改进

首先，不需要将模板设为函数，直接使用_.template即可。我写了另一个答案，提供了有关how to use _.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 view scoped alias 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();

这是一个超级基本的示例，您应该知道性能可以进一步提高，如果按原样使用它可能会泄漏内存。

查看如何improve list rendering performance with Backbone。

【讨论】：