Question

我正在使用优秀的框架Backbone.js开发简单的应用程序，如果我可以创建可配置的主干视图事件选择器，例如这样它不起作用，那将会很好，导致它的错误的js语法：

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

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

Answer 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;
    }
});

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

Answer 2

我更喜欢以下方法用于动态事件，因为只要调用delegateEvent，就会调用此函数。

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

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' });

Answer 3

你可以这样做：

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

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

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

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

3 个答案: