可配置的Backbone.js事件選擇器

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

你可以做這樣的：

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

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

但有些突破的事件是如何在骨幹聲明的慣例，使代碼難以閱讀。也許有人有更好的方法。

Answer 3

我更喜歡下面的動態事件的方法，因爲這個函數將在任何時候調用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' });