> I think I need to use .bind(this) somewhere...

Yup, exactly right.  When you're passing around a reference to a
method for something else to call later, you'll need to bind it to the
instance -- otherwise, it will have the wrong context ("this" will be
wrong within the function call).  So for instance, instead of:


...you'd want


(You probably will never have need to use bindAsEventListener, details

There's nothing magic about what bind does, it just returns a function
that, when called, calls the original function in a way that sets the
context correctly.

Here's[2] a ueful page from the unofficial Prototype & script.aculo.us
wiki on this.  It also has some links at the end to useful articles
discussing "this" and context, so you know what's going on under the


BTW, a terminology point:  In your subject line you talked about a
"class function" and in your note you talked about "class variables".
In each case, looking at your note and code you meant "instance"
rather than "class".  An "instance" method or variable is one you call
or use on *instances* of a class, whereas a "class" method or variable
is one you call or use on the class itself.  For example,
Element#observe is an instance method, because you call it on
*instances* of the Element class:


But Class.create (for example) is a class method, because you only
call it on the Class class itself:

    var MyClass = Class.create(...);

Just FWIW.

T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

On May 20, 6:27 am, Dave L <dly...@gmail.com> wrote:
> I am trying to use pre-existing functions in a new prototype class but
> am having some trouble with binding.  When I call a function within a
> function it says that one of my class variables is undefined.  I have
> defined the class variable correctly I think:
>   var DropDown = Class.create({
>     initialize: function(date, appt_counter, times, edit_or_add) {
>       this.start_drop_id = "start_drop_" + date + "_" + appt_counter;
>     })
> Then in the following outside function, start_drop_id is errored as
> being undefined:
>     DropDown.prototype.show_block = function(element_id, element)
> {
>       if(document.getElementById(element_id).style.display == "block")
> {
>         outsideOf = null;
>         $(document.body).descendants().invoke
> ('stopObserving','click',this.outside); //stopObserving the outside
> request as we have finished
>           document.getElementById(element_id).style.display = "none";
>       } else {
>        outsideOf = element_id;
>        document.getElementById(element_id).style.display =
> "block";
>        $(document.body).descendants().invoke
> ('observe','click',this.outside);
>         element.stopObserving('click',this.outside) //need to then
> stop this from observing the outside - ie requires it at least
>       };
>     };
>     DropDown.prototype.outside = function(event) {
>       //alert(this.outsideOf)
>       this.element = event.element();
>       //alert(this.element.id)
>       if( outsideOf == null ) {           //this shouldnt happen, but
> just incase
>         $(document.body).descendants().invoke
> ('stopObserving','click',this.outside);
>         return;
>       };
>       this.element = Event.element(event);
>       if( this.element.descendantOf( $(outsideOf) ) !== true) {
>         outsideOf = null;
>         $(document.body).descendants().invoke
> ('stopObserving','click',this.outside);
>         document.getElementById(this.start_drop_id).style.display =
> "none";  //it says this is null
>       };
>     };
> I think I need to use .bind(this) somewhere or maybe
> bindAsEventListener?  I'm not sure.  This is my first time writing a
> prototype class so I am bit lost.
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-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to