My Challenge:
I have a banner on my website, www.meetscoresonline.com When you
rollover the banner, the action to expand the banner will pause,
expecting the user to remain on the banner to ensure he wishes the
banner to expand. The banner should remain expanded until I leave the
banner.
Not sure why I am having so much trouble with this, but things like
mouseout event is firing when I rollover objects contained by the
banner at which time I should NOT collapse the banner. The banner
should only collapse when the user mouses away from the banner.
In my efforts to code this, I wrote up the test javascript and was
trying to understand the behavior of binding the objects. Your
explanation helps, but honestly I am still confused on the behavior of
the test javascript code.
Karl..
On Sep 19, 2:48 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> Hi,
>
> I can't quite make out what you're trying to do, but I can tell you
> why what you're doing isn't working: Function#bind[1] *returns* a new
> bound function, it doesn't change the original function at all. Since
> you're not assigning the return value to anything, it's not being
> used.
>
> You typically use #bind when you're passing a reference to a function
> that needs to be called with a specific context (`this` value) into
> something that doesn't provide any way for you to tell it what that
> context should be (like an event handler). What #bind does is create a
> new function that doesn't care what `this` value it's called with. The
> new function, when called, turns around and calls the original
> function with the `this` value you told it to use (as well as any
> curried arguments and then the actual arguments it was called with).
>
> Here's a classic event handler example:
>
> $('someElement').observe('click', myObj.myMethod.bind(myobj));
>
> The above uses #bind to create a function that, when called, will turn
> around and call `myMethod` in the context of `myObj`. `myMethod` is
> not changed in any way. The return value of #bind is passed in as the
> handler. To make it a bit more explicit:
>
> var handler = myObj.myMethod.bind(myobj);
> $('someElement').observe('click', handler);
>
> [1]http://api.prototypejs.org/language/function/prototype/bind/
>
> HTH,
> --
> T.J. Crowder
> Independent Software Engineer
> tj / crowder software / com
> www / crowder software / com
>
> On Sep 18, 7:36 pm, kstubs <kst...@gmail.com> wrote:
>
>
>
> > In my test class, I call show() method externally and then internally
> > but the internal calls are not working when binding "this". The
> > expected console results for the following implementation:
>
> > _test = new test();
> > _test.show('outer', 0);
> > _test.hide('outer');
>
> > EXPECTED CONSOLE LOG:
> > show: outer
> > show: inner
> > show: inner no bind
> > hide: inner
> > hide: outer
>
> > ACTUAL CONSOLE LOG:
> > show: outer
> > show: inner no bind
> > hide: outer
>
> > Here is my test class. Is there something wrong with the binding
> > method?
>
> > var test = Class.create({
> > show: function(caller, itt)
> > {
> > console.log('show: ' + caller);
>
> > if(itt == 0)
> > {
> > this.show.bind(this, 'inner', 1);
> > this.show('inner no bind', 1);
> > }
>
> > if(itt == 1)
> > this.hide.bind(this, 'inner', itt);
> > },
> > hide: function(caller)
> > {
> > console.log('hide: ' + caller);
>
> > }
>
> > });
--
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.
