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 <[email protected]> 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="box">BOX</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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
