Javascript 如何在backbone.js中动态定义事件
我的视图中有更多单击事件,如Javascript 如何在backbone.js中动态定义事件,javascript,events,backbone.js,dynamic,Javascript,Events,Backbone.js,Dynamic,我的视图中有更多单击事件,如 events:{ 'click #link1':'showDetails', 'click #link2':'showDetails', 'click #link3':'showDetails', 'click #link4':'showDetails', 'click #link5':'showDetails', 'cli
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_链接等)
请发表你的建议 您可以这样做: 单一事件: 功能
showDetails
:
编辑以响应OP注释:在此过程中,您必须为页面中的每个ID
元素定义一个函数。
主干视图的el
属性必须是.link
的父级。
在对象{}
内部,当定义变量或函数时,需要使用:
代替=
,而不使用此前缀。
必须定义新的视图
(新视图
)才能查看脚本的工作情况
工作示例
JS/主干网
注意
e.target
文档:
el
物业文档:
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>
例如:
。。。是的,我还需要在函数调用中传递一些参数:)使用class和data-*
属性并使其动态化。不要重复你自己的话,我无法使它起作用。我不知道我错过了什么??jsfiddle.net/keshav_1007/p10masvr/1我遇到了未捕获的异常。。请让我知道我错过了什么我无法让它工作。我不知道我错过了什么??我得到了一个意想不到的例外。。请让我知道我错过了什么看这里:看我编辑的答案:)当我实现上述代码时,我得到类型错误$(..).attr(..)未定义。然后,当我选中“var\u type=$(e.target).attr(“id”)时,它给了我空值。但是我在html中指定了“id”。但它的价值是空的。请让我知道为什么?如果我不使用“el”属性会发生什么。因为如果我在代码中使用该属性,那么我的整个页面将变为空白:(我在回答中添加了两个注释,分别是e.target
和el
。有很多方法可以满足您的需要…这是一种方法,完全取决于您如何在应用程序中实现代码…尝试使用控制台登录。登录e.target
可能值与预期值不同。如果您不是我们eel
我不知道是否触发了事件列表。如果el
值为body
黑色,则页面可能在渲染函数中存在一些错误。
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!");
}
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();
<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>