[Proto-Scripty] Re: Prototype Class, Event Listeners and Referencing Self
Hi,
If you really want `takeAction` to be a public property on the
instance, you typically use Function#bind for this; example in the
docs:
http://api.prototypejs.org/language/function/prototype/bind/
Basically, Function#bind creates a function that, when called, will
turn around and call the original function in a way that `this` is set
correctly, passing along any arguments. The function is defined is in
a small context so it's not closing over a bunch of extraneous stuff.
Alternately, if you're setting up a number of event handlers that
*don't* actually need to be instance methods, they just need access to
`this`, AND the code within them is small, you can use your
initializer closure to do that more directly:
var Thingy = Class.create({
initialize: function() {
var self = this;
$('foo').observe('click', fooClick);
$('bar').observe('click', barClick);
function fooClick(event) {
self.doSomething();
}
function barClick(event) {
self.doSomething();
self.doSomethingElse();
}
},
doSomething: function() {
alert(I did something.);
},
doSomethingElse: function() {
alert(I did something else.);
}
});
That avoids creating multiple small closures (one for each event
handler), but note that a new copy of each of those functions is
created for each instance, so if they're more than a line or two of
code, #bind is the way to go. More on closures here:
http://blog.niftysnippets.org/2008/02/closures-are-not-complicated.html
Off-topic, but:
* Your use of Class.create is a couple of years behind Prototype. As
of 1.6, the correct use is to pass the object containing the method
definitions *into* Class.create, not to replace the prototype
afterward. Example above.
* Rather than using addEventListener directly (which will fail on IE7
(8?) and below), use Prototype's observe method instead:
http://api.prototypejs.org/dom/event/observe/
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
On Jul 20, 6:13 pm, Doc Torbin mtor...@gmail.com wrote:
I have the following snippet of code which illustrates a problem that
I'm having. I have an event listener within a class that I'd like to
have be self aware. I'd like it to be able to call another function
within the Class but I haven't found the right method to have it do
so. Please advise:
!DOCTYPE html
html
head
script type=text/javascript src=../prototype.js/script
style type=text/css
#box{position:fixed;width:100px;border:3px solid
#000;background-
color:#00ff00;font-size:14pt;font-weight:bold;text-
align:center;padding:50px 25px;cursor:pointer;}
/style
script type=text/javascript
var MyOBJ = new Class.create();
MyOBJ.prototype = {
initialize: function(){
try{
$('box').addEventListener(click,this.takeAction,false);
}
catch(error){alert(error);}
},
takeAction: function(event){
alert(I got to this function without
issue.);
this.anotherAction();
},
anotherAction: function(){
alert(I won't get here.);
}
}
document.observe(dom:loaded, function(){
var spriteOBJ = new MyOBJ();
});
/script
/head
body
div id=boxBOX/div
/body
/html
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Prototype Class, Event Listeners and Referencing Self
Hi Guillaume,
Just #bind is sufficient. You almost never need #bindAsEventListener:
http://proto-scripty.wikidot.com/prototype:tip-you-probably-don-t-need-bindaseventlistener
-- T.J. :-)
On Jul 21, 10:18 am, Guillaume Lepicard guillaume.lepic...@gmail.com
wrote:
Hi, you need to bind the listener function to your object:
$('box').addEventListener(click,this.takeAction.bindAsEventListener(this)
,false);
more
details:http://api.prototypejs.org/language/function/prototype/bindaseventlis...
On Tue, Jul 20, 2010 at 7:13 PM, Doc Torbin mtor...@gmail.com wrote:
I have the following snippet of code which illustrates a problem that
I'm having. I have an event listener within a class that I'd like to
have be self aware. I'd like it to be able to call another function
within the Class but I haven't found the right method to have it do
so. Please advise:
!DOCTYPE html
html
head
script type=text/javascript
src=../prototype.js/script
style type=text/css
#box{position:fixed;width:100px;border:3px solid
#000;background-
color:#00ff00;font-size:14pt;font-weight:bold;text-
align:center;padding:50px 25px;cursor:pointer;}
/style
script type=text/javascript
var MyOBJ = new Class.create();
MyOBJ.prototype = {
initialize: function(){
try{
$('box').addEventListener(click,this.takeAction,false);
}
catch(error){alert(error);}
},
takeAction: function(event){
alert(I got to this function
without issue.);
this.anotherAction();
},
anotherAction: function(){
alert(I won't get here.);
}
}
document.observe(dom:loaded, function(){
var spriteOBJ = new MyOBJ();
});
/script
/head
body
div id=boxBOX/div
/body
/html
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.comprototype-scriptaculou
s%2bunsubscr...@googlegroups.com
.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Prototype Class, Event Listeners and Referencing Self
Hi TJ,
Thanks for pointing this !
When I first read the API doc (in the old format), explanations were not
that clear or i misunderstoos them ; but then looking in the new API doc,
it's much more clear ; and thanks for the
proto-scripty.wikidot.comhttp://proto-scripty.wikidot.com/prototype:tip-you-probably-don-t-need-bindaseventlistener
i
wasn't aware of !
On Wed, Jul 21, 2010 at 12:05 PM, T.J. Crowder t...@crowdersoftware.comwrote:
Hi Guillaume,
Just #bind is sufficient. You almost never need #bindAsEventListener:
http://proto-scripty.wikidot.com/prototype:tip-you-probably-don-t-need-bindaseventlistener
-- T.J. :-)
On Jul 21, 10:18 am, Guillaume Lepicard guillaume.lepic...@gmail.com
wrote:
Hi, you need to bind the listener function to your object:
$('box').addEventListener(click,this.takeAction.bindAsEventListener(this)
,false);
more details:
http://api.prototypejs.org/language/function/prototype/bindaseventlis...
On Tue, Jul 20, 2010 at 7:13 PM, Doc Torbin mtor...@gmail.com wrote:
I have the following snippet of code which illustrates a problem that
I'm having. I have an event listener within a class that I'd like to
have be self aware. I'd like it to be able to call another function
within the Class but I haven't found the right method to have it do
so. Please advise:
!DOCTYPE html
html
head
script type=text/javascript
src=../prototype.js/script
style type=text/css
#box{position:fixed;width:100px;border:3px solid
#000;background-
color:#00ff00;font-size:14pt;font-weight:bold;text-
align:center;padding:50px 25px;cursor:pointer;}
/style
script type=text/javascript
var MyOBJ = new Class.create();
MyOBJ.prototype = {
initialize: function(){
try{
$('box').addEventListener(click,this.takeAction,false);
}
catch(error){alert(error);}
},
takeAction: function(event){
alert(I got to this function
without issue.);
this.anotherAction();
},
anotherAction: function(){
alert(I won't get here.);
}
}
document.observe(dom:loaded, function(){
var spriteOBJ = new MyOBJ();
});
/script
/head
body
div id=boxBOX/div
/body
/html
--
You received this message because you are subscribed to the Google
Groups
Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.comprototype-scriptaculous%2bunsubscr...@googlegroups.comprototype-scriptaculou
s%2bunsubscr...@googlegroups.com s%252bunsubscr...@googlegroups.com
.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.comprototype-scriptaculous%2bunsubscr...@googlegroups.com
.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
