Question

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

这是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);
}

}）;

如何避免所有元素触发事件并仅触发一次点击并且只触发一次？

Answer 1

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

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

你也可能想要了解基本的MVC概念，因为表和行是与视图相关的概念，而不是与模型相关的，所以名为TrModel的类是代码气味，你不是清楚模型与视图。

Answer 2

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

而是为每个tr创建一个视图，我会为整个表创建一个视图。

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

我创建了一个带有工作示例的jsbin。

主干点击事件与视图一样多次触发

2 个答案: