可配置的 Backbone.js 事件选择器答案

【问题标题】：Configurable Backbone.js events selectors可配置的 Backbone.js 事件选择器
【发布时间】：2013-03-15 22:59:26
【问题描述】：

我正在使用出色的框架 Backbone.js 开发简单的应用程序，如果我可以制作可配置的主干视图事件选择器会很好，例如这种方式它不起作用，因为它是错误的 js 语法：

return Backbone.View.extend({
    events: {
        'click ' + someConfigSelector: 'doSomethink'
    }
})

还有其他方法可以在 Backbone 视图中设置事件吗？

【问题讨论】：

标签： backbone.js backbone-views backbone-events

【解决方案1】：

看看这个小提琴：http://jsfiddle.net/phoenecke/hyLMz/1/

您可以为events 使用函数而不是对象。

return Backbone.View.extend({
    events: function() {
        // add some normal events to the hash
        var e = {
            'click #foo': 'doSomething1',
            'click #bar': 'doSomething2'
        };
        // add one where key is calculated
        e['click ' + someConfigSelector] = 'doSomething';
        // return events hash
        return e;
    }
});

这样，您可以添加根据您的配置计算密钥的事件。

【讨论】：

【解决方案2】：

我更喜欢下面的动态事件方法，因为这个函数会在任何时候调用delegateEvent。

根据delegateEvent 上的docs，在视图的initialize 函数执行后调用，您可以使用此技术动态创建事件：

var TestView = Backbone.View.extend({    
    events: function () {
        var evt = {};
        evt['click ' + this._extraSelector] = '_onButtonClick';
        return evt;
    },
    initialize: function(config) {
        // passed in the selector, or defaulted 
        this._extraSelector = config.extraSelector || "BUTTON.default";
    }, 

    _onButtonClick: function() { }
});

var v = new TestView({ extraSelector: 'BUTTON.sample' });

【讨论】：

不幸的是，截至 2015 年 11 月，它似乎不再起作用，因为在视图初始化期间，在 initialize() 之前调用了 delegateEvents()。需要调用 this.delegateEvents();在 initialize() 内再一次获取 config.extraSelector 的值。

【解决方案3】：

你可以这样做：

return Backbone.View.extend({
    events: { },

    initialize:function() {
        this.events['click ' + someConfigSelector] = 'doSomethink';
    }
})

但它在某种程度上打破了在主干中声明事件的惯例，并使代码更难阅读。也许有人有更好的方法。

【讨论】：