如何在 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 等）。

请post提出您的建议。

Answer 1

你可以这样做：

单个事件：

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

函数`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 评论： 在此过程中，您必须为页面的 .link 个元素中的每个 ID 定义一个函数。 Backbone 视图 的 el 属性必须 是 .link 的父级。在对象 {} 中，当您定义 variable 或 function 时，您需要使用 : 而不是 =，而不是使用 this. 字首。您必须定义新的 View (new View) 才能看到脚本有效。

工作示例

JS/backbone

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();

注意.

e.target 文档：Here

el 属性文档：Here

HTML

此脚本适用于 HTML 例如：

<a class="link" id="link1" href="#">Foo</a>
<a class="link" id="link2" href="#">Foo</a>
<a class="link" id="link3" href="#">Foo</a>
<a class="link" id="link4" href="#">Foo</a>
<a class="link" id="link5" href="#">Foo</a>
<a class="link" id="link6" href="#">Foo</a>
<a class="link" id="link7" href="#">Foo</a>
<a class="link" id="link8" href="#">Foo</a>
<a class="link" id="link9" href="#">Foo</a>
<a class="link" id="link10" href="#">Foo</a>
<a class="link" id="link11" href="#">Foo</a>
<a class="link" id="link12" href="#">Foo</a>
<a class="link" id="link13" href="#">Foo</a>
<a class="link" id="link14" href="#">Foo</a>
<a class="link" id="link15" href="#">Foo</a>
<a class="link" id="link16" href="#">Foo</a>
<a class="link" id="link17" href="#">Foo</a>
<a class="link" id="link18" href="#">Foo</a>
<a class="link" id="link19" href="#">Foo</a>
<a class="link" id="link20" href="#">Foo</a>
<a class="link" id="link21" href="#">Foo</a>

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

...再见

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

How to define events dynamically in backbone.js

javascript

events

dynamic

backbone.js

单个事件：

函数`showDetails`:

工作示例

JS/backbone

HTML

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

How to define events dynamically in backbone.js

javascript

events

dynamic

backbone.js

单个事件：

函数showDetails:

工作示例

JS/backbone

HTML

函数`showDetails`: