[英]How to define events dynamically in backbone.js
I have more click events inside my view like 我的视图中有更多点击事件
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'
}
Is there any way to make it dynamic. 有没有办法让它变得动态。 Because the number of click events may increase in future.
因为将来可能会增加点击事件的数量。
Note: I can get those ids(#etox_link,etc) in an array. 注意:我可以在数组中获取这些ID(#etox_link等)。
please post your suggestions. 请发表您的建议。
you can do Something like this: 你可以这样做:
events:{
'click .link':'showDetails',
}
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!");
}
Edited to respond to OP comment: whit this procedure you must define a function for every ID
in of .link
elements your page. 编辑以响应OP评论:在此过程中,您必须为
.link
元素中的每个ID
定义一个函数。 The el
property of the Backbone View MUST be a parent of .link
. Backbone View的
el
属性必须是.link
的父级。 Inside object {}
you need to use :
instead =
when you define a variable
or a function
, and instead you don't use this.
在内部对象
{}
您需要使用:
=
当您定义variable
或function
,而不是使用this.
prefix. 字首。 You must define new
View
( new View
) to see the script works. 您必须定义新
View
( 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();
NOTE . 注意 。
e.target
documentation: Here e.target
文档: 这里
el
property documentation: Here el
property documentation: 这里
this script works with a HTML like: 此脚本适用于以下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>
The example: http://jsfiddle.net/p10masvr/6/ 例子: http : //jsfiddle.net/p10masvr/6/
... Byee ... Byee
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.