Question

我试图将点击事件绑定到我的骨干视图的顶级标记。它目前看起来像这样：

var PageSize = Backbone.View.extend({

    tagName: 'option',
    className: "setPageSize",

    initialize: function(options) {
        this.value = options.value;
        this.text = options.text;
    },

    template: _.template(
        "<%=text%>"
    ),

    render: function() {

        this.$el.html(this.template({text: this.text}));
        return this;
    },

    events: {
        'click .setPageSize': 'setPageSize'
    },

    setPageSize: function() {
        console.log(this.value);
    },

});

module.exports = PageSize;

其他视图会实例化一堆这些PageSize视图，并将其附加到<select>标记。我确信其他观点不是问题，因为<option>标记会在<select>标记中显示正确的文字。

我遇到的问题是点击事件会在点击给定的<option>标记时触发，但不会触发。我认为这是因为click事件所监视的类是最外面的标记（使用tagName和className指定的标记）的一部分，由于某种原因，它没有事件监听器附加到它。

我认为我需要以某种方式将click事件绑定到整个视图而不是其中的模板项，但我完全不确定我是如何做到的。我已尝试执行this.setElement(this.$el.html())，但这样做会使<option>标签中的任何<select>标签都显示出来。

Answer 1

来自骨干文档delegateEvents（我强调添加）

使用jQuery函数为视图中的DOM事件提供声明性回调。如果未直接传递事件哈希，则使用this.events作为源。事件以{＆＃34;事件选择器＆＃34;：＆＃34;回调＆＃34;}的格式编写。回调可以是视图上方法的名称，也可以是直接函数体。 省略选择器会导致事件绑定到视图的根元素（this.el）。

问题出在您的事件对象中。基本上是因为你添加了一个＆＃34;类选择器＆＃34; click事件仅针对视图元素中具有类＆＃34; .setPageSize＆＃34;的元素进行处理。但是，该类在视图元素本身上，但不在其任何子元素上，因此处理程序永远不会被调用。

通过更改：

events: {
    'click .setPageSize': 'setPageSize'
},

到此：

events: {
    'click': 'setPageSize'
},

导致事件绑定到视图的根元素（this.el）。换句话说就是观点本身。

将click事件绑定到Backbone视图的顶级标记

1 个答案: