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

Question

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

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> 标签被点击时触发，但从未触发。我认为这是因为点击事件监视的 class 是最外层标签的一部分（用 tagName 和 className 指定的标签），由于某种原因它没有事件监听器附加到它。

我认为我需要以某种方式将点击事件绑定到整个视图而不是其中的模板项，但我完全不确定我将如何去做。我试过 this.setElement(this.$el.html()) 但这样做会使 <option> 标签中的 none 完全显示在 <select> 中。

Answer 1

来自 backbone 文档 delegateEvents（强调由我添加）

Uses jQuery's on function to provide declarative callbacks for DOM events within a view. If an events hash is not passed directly, uses this.events as the source. Events are written in the format {"event selector": "callback"}. The callback may be either the name of a method on the view, or a direct function body. Omitting the selector causes the event to be bound to the view's root element (this.el).

问题出在您的事件对象中。基本上，因为您添加了 "class selector"，所以只会为视图元素中具有 class“.setPageSize”的元素处理点击事件。但是，class 位于视图的元素本身上，但不位于其任何子元素上，因此永远不会调用处理程序。

通过改变这个：

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

对此：

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

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

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

Bind click event to top level tag of Backbone view

javascript

backbone.js

backbone-views