如何在backbone.js中动态定义事件

Question

我的视图中有更多点击事件，例如

events:{
            'click #link1':'showDetails',
            'click #link2':'showDetails',
            'click #link3':'showDetails',
            'click #link4':'showDetails',
            'click #link5':'showDetails',
            'click #link6':'showDetails',
            'click #link7':'showDetails',
            'click #link8':'showDetails',
            'click #link9':'showDetails',
            'click #link10':'showDetails',
            'click #link11':'showDetails',
            'click #link12':'showDetails',
            'click #link13':'showDetails',
            'click #link14':'showDetails',
            'click #link15':'showDetails',
            'click #link16':'showDetails',
            'click #link17':'showDetails',
            'click #link18':'showDetails',
            'click #link19':'showDetails',
            'click #link20':'showDetails',
            'click #link21':'showDetails'
}

有没有办法让它变得动态。因为将来点击事件的数量可能会增加。

注意：我可以在数组中获取这些ID（＃etox_link等）。

请发表您的建议。

Answer 1

你可以做这样的事情：

单一事件：

events:{
    'click .link':'showDetails',
}

function showDetails：

showDetails : function(e){
   var _type = $(e.target).attr("id").toUpperCase();
   var _callbackName = "show"+_type+"Details";
   if(typeof this[_callbackName] !== "function") return console.log("No callback named:",_callbackName);
   this[_callbackName].call(this,e);
},

showAESDetails : function(e){
   console.log("Do something!");
}

已编辑以回复OP评论，请执行此过程，您必须为您网页的ID元素中的每个.link元素定义一个函数。 Backbone View 必须的el属性是.link的父级。 在内部对象{}中，当您定义:或=时，您需要使用variable代替function，而不是使用{{} 1}}前缀。 您必须定义新的this.（View）才能看到脚本有效。

工作示例

JS /骨干

new View

注意即可。

var View = Backbone.View.extend({ el : "body", //must be parent of .link elements events:{ 'click .link':'showDetails' }, showDetails : function(e){ console.log("event"); var _type = $(e.target).attr("id").toUpperCase(); var _callbackName = "show"+_type+"Details"; this[_callbackName].call(this,e); }, showAESDetails : function(e){ //an example of callback console.log("Hello!"); } //you must define the callback of all ID }); new View(); 文档：Here

e.target财产文档：Here

HTML

此脚本适用于以下HTML：

el

示例：http://jsfiddle.net/p10masvr/6/

... Byee