将点击事件绑定到 Backbone 视图的顶级标签答案

【问题标题】：Bind click event to top level tag of Backbone view将点击事件绑定到 Backbone 视图的顶级标签
【发布时间】：2023-04-08 12:41:01
【问题描述】：

我正在尝试将点击事件绑定到我的主干视图的顶级标签。目前看起来是这样的：

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> 标记时应该触发的点击事件永远不会触发。我认为这是因为单击事件监视的类是最外层标记的一部分（使用tagName 和className 指定的标记），由于某种原因，它没有附加事件侦听器。

我认为我需要以某种方式将 click 事件绑定到整个视图而不是其中的模板项，但我完全不确定我将如何去做。我已经尝试过this.setElement(this.$el.html())，但这样做会导致<option>标签根本不会出现在<select>中。

【问题讨论】：

在你的事件对象中将这个'click .setPageSize': 'setPageSize'改成这个'click': 'setPageSize'
这有效 - 如果您将其作为实际答案发布，我会接受它。

标签： javascript backbone.js backbone-views

【解决方案1】：

来自主干文档delegateEvents（重点由我添加）

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

问题出在您的事件对象中。基本上，因为您添加了“类选择器”，所以单击事件只会处理视图元素中具有“.setPageSize”类的元素。然而，该类在视图的元素本身上，而不是在它的任何子元素上，因此处理程序永远不会被调用。

通过改变这个：

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

对此：

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

使事件绑定到视图的根元素 (this.el)。换句话说，视图本身。

【讨论】：