PDA

View Full Version : Event delegation, same event different delegates



gcallaghan
21 Jan 2011, 11:52 AM
I'd like to add an event handler for the same event but different delegates. Currently using the technique that is outlined inthe blog posting I seem to be overwriting the listener.

http://www.sencha.com/blog/2010/11/11/event-delegation-in-sencha-touch/#comment-130203



...
listeners:{
body:{
singletap:function(){
alert('hello');
},
delegate:'.hello'
},
body:{
singletap:function(){
alert('goodbye');
},
delegate:'.goodbye'
}
}


currently only the last one, 'goodbye', is added. If I switch the order then hello is added.


P.S. if this is a duplicate post I apologize. I didn't see it the original posted so I must have navigated off the page before posting. Doh!

AndreaCammarata
21 Jan 2011, 3:50 PM
Hi gcallaghan.
To solve your issue write your code in this way:



...

listeners:{
body:{
singletap: myHandler,
delegate: ['.hello','.goodbye']
}
}


but before that, just define your "myHandler" function



var myHandler = function(e) {
if (e.getTarget('.hello')) {
alert('hello');
}
else if (e.getTarget('.goodbye')){
alert('goodbye');
}
}


Hope this helps ;)

AndreaCammarata
21 Jan 2011, 3:51 PM
Hi gcallaghan.
To solve your issue just write your code in this way.



...
listeners:{
body:{
singletap: function(e) {
if (e.getTarget('.hello')) {
alert('hello');
}
else if (e.getTarget('.goodbye')){
alert('goodbye');
}
},
delegate: ['.hello','.goodbye']
}
}


Hope this helps ;)

mitchellsimoens
22 Jan 2011, 9:45 AM
or you can execute multiple on functions but I think @andreacammara's example is better.

One thing that I have seen that makes code cleaner is not have annonymous functions. This means that instead of



...
listeners: {
body: {
singletap: function(e) {
if (e.getTarget('.hello')) {
alert('hello');
}
else if (e.getTarget('.goodbye')){
alert('goodbye');
}
},
delegate: ['.hello','.goodbye']
}
}

you can do this


var handleSingleTap = function(e) {
if (e.getTarget('.hello')) {
alert('hello');
} else if (e.getTarget('.goodbye')){
alert('goodbye');
}
}

...
listeners: {
body: {
singletap: handleSingleTap,
delegate: ['.hello','.goodbye']
}
}

gcallaghan
27 Jan 2011, 10:38 AM
@mitchellsimoens

I do admit it looks cleaner, however, my problem with that approach is polluting global scope.

mitchellsimoens
27 Jan 2011, 10:41 AM
May I ask why? Usually people stay away from what's called anonymous functions. You can usually find that you can then reuse functions whichnis very good programming, IMHO.

gcallaghan
27 Jan 2011, 10:58 AM
Reuse is excellent programming, however, so is packaging/namespacing. If its a utility function that gets used by many object, great! I might refactor to something like
util.handleSingleTap=function(){} But if its something just associated with my current object I do try and make it a method. However, with the current listener implementation, adding a scope of "this" to the config seems to attach it to the dom window not the object at hand. In this case I went with code like...


//@private
afterRender:function(){
var me = this;
MyComponent.superclass.afterRender.call(me);
me.mon(me.el,{
touchstart:me.touchStartHandler,
touchend:me.touchEndHandler,
singletap:me.tapHandler,
scope:me,
delegate:'.active-item'
})
},
//@private
tapHandler:function(e){
var el = this.getEventElement(e);
if(el.dom.id){
this.tapController(el);
e.preventDefault();
}
},
//@private
tapController:function(el){
this.fireEvent(this.getActiveItemCfg(el).event,el);
},
activeItemTable:{
'id1':{
event:'id1Tapped'
},
'id2':{
event:'id2Tapped',
touchClass:'x-item-selected'
},
'id3r':{
event:'id3Tapped',
touchClass:'x-item-selected'
}...

},


A bit roundabout, I know, right? But I get changing specs daily if not sometimes hourly;-) So I wanted something easy to switch out and I used a table based approach to handle the "business illogic". I got this from my fuzzy recollections of my half reading of Code Complete 2.

Generally I try to avoid global anything as it can produce unwanted sideffects, like what if I name something else singleTapHandler in another script? I like bundling the functionality with the data it handles. If i find Im violationg "DRY" I refactor the common code into a library routine.

goes back to your firm position on the use of "id's" in some long forum threads between you and andreas I can't find right now.