1

我搜索了有关此主题的信息，但仅找到有关获取事件元素的信息。是的，我可以得到一个 clicked div 的元素，但为什么它被触发了 19 次呢？（这是总观看次数）。单击事件的信息是相同的 - 单击的 div。

这是 div 的样子：http ://d.pr/i/AbJP

这是console.log：http ://d.pr/i/zncs

这是 index.js 的代码

$(function () {
var Table = new Backbone.Collection;
var TrModel = Backbone.Model.extend({
    defaults: {
        id: '0',
        name: 'defaultName'
    },
    initialize: function () {
        this.view = new Tr({model: this, collection: Table});
        this.on('destroy', function () {
            this.view.remove();
        })
    }
});
var Tr = Backbone.View.extend({
    el: $('.pop-tags').find('.container'),
    template: _.template($('#td_template').html()),
    events: {
        'click .tag': 'clicked'
    },
    clicked: function (event) {
        event.preventDefault();
        event.stopPropagation();
        console.log(event.currentTarget);
    },
    initialize: function () {
        this.render();
    },
    render: function () {
        this.$el.append(this.template(this.model.attributes));
        return this;
    }
});
for (var i = 0, size = 19; i < size; i++) {
    var trModel = new TrModel({id: i, name: 'name_' + i});
    Table.add(trModel);
}

});

如何避免所有元素触发事件并仅触发一个单击且仅触发 1 次的元素？

4

2 回答 2

2 
el: $('.pop-tags').find('.container'),

不要那样做。您将每个视图实例附加到同一个 DOM 节点。每个主干视图都需要一个不同的 DOM 节点，或者如您所见，委托事件变得完全混乱。在您的视图中，设置tagName: 'tr'，然后在创建视图时创建它们，调用它们，.render()然后将它们附加到 DOM 中，例如$('.table-where-views-go').append(trView.el);.

您可能还想复习基本的 MVC 概念，因为 Tables 和 Rows 是与视图相关的概念，而不是与模型相关的概念，因此一个名为的类TrModel是一种代码味道，您在 Model vs View 上不清楚。

于 2013-09-02T17:32:13.237 回答
0

我会使用稍微不同的方法来解决您的问题。

而对于每个 tr 的一个视图，我将为整个表创建一个视图。

当我创建视图时，我会将包含 19 个模型的集合传递给视图，并在 view.initialize 中使用该集合来呈现行。

我用一个工作示例创建了一个jsbin 。

于 2013-09-02T15:07:30.780 回答