I am attaching a self-contained test page. This demonstrates an issue
with bind(). Note test "ONE" fails. All other tests pass as
expected. Test one is:
this.out.bind(this,'ONE ');
This fails. Interestingly, if I add a delay to this, as in test TWO,
THREE, it works. So this works:
this.out.bind(this,'TWO ').delay(1.5);
Please have a look. Am I doing something wrong with bind? As for the
other issues mentioned in this thread, I am going to clean up my
Javascript some, as I think there is some other problem. I'm having
issues with scope, setTimeouts, etc... these stand-alone tests prove
that the issue is somewhere else. Thanks for looking at the bind
problem.
Karl...
==== STANDALONE CODE ====
<!DOCTYPE HTML>
<html>
<head>
<!-- TODO: Obviously, change this if you're using a different
encoding -->
<meta http-equiv="Content-type" content="text/
html;charset=UTF-8"></meta>
<title>Test Page</title>
<script type='text/javascript' src='http://prototypejs.org/
assets/2009/8/31/prototype.js'></script>
<script type='text/javascript'>
var four = 0;
var five = 0;
var Thing = Class.create({
Name:'Paul',
initialize: function()
{
},
test: function(e){
var elm = e.element();
console.log(elm.readAttribute('id'));
$('out').update();
$('out').insert('<p>Expecting: ONE TWO THREE FOUR FIVE (five
ommitted if you rollover out region)</p>');
$('out').insert('<p>Actual: TWO THREE FOUR FIVE</p>');
// ONE
this.out.bind(this,'ONE ');
// TWO
this.out.bind(this,'TWO ').delay(1.5);
// THREE
var f = function() {
this.out('THREE ');
}.bind(this);
var three = setTimeout(f, 3000);
// FOUR
four = setTimeout(this.testTimeout.bind(this, 'FOUR '), 4000);
// FIVE
five = setTimeout(this.testTimeout.bind(this, 'FIVE '), 5000);
},
testTimeout: function(value) {
this.out(value);
},
out: function(value) {
$('out').insert(value);
},
cancel: function(){
if(five != null)
clearTimeout(five);
}
});
var t = null;
document.observe('dom:loaded', function() {
t = new Thing();
$('btnGo').observe('click', t.test.bindAsEventListener(t));
$('out').observe('mouseover', t.cancel.bindAsEventListener(t));
});
</script>
</head>
<body>
<div>
<input type='button' id='btnGo' value='Go'/>
</div>
<div id="out" style="background-color:#ccc; padding:5px;
border:#999">
</div>
</body>
</html>
On Sep 19, 6:12 pm, kstubs <[email protected]> wrote:
> Does it mean: if I am using a member variable (ie., this.active =
> false;) who's value is true when I'm over the banner and if true then
> show the banner after specific wait time but if I cancel the variable
> because of another event, like mouseover the document, the method
> bound to the show() event is a copy, so this.active is true??
>
> The wait to show event is coded like this:
>
> this.show.bind(this).delay(2);
>
> The show event has something like this:
>
> if(this.active)
> this.banner.addClassName('expanded');
>
> A method hide on the same object occurs on document mouseover. One
> thing it does is to set
>
> this.active = false;
>
> This document mouseover could occur in the 2 second delay. I am
> expecting that setting this.active = false will cancel expanding the
> banner.
>
> Does this clear things up?
>
> Karl..
>
> On Sep 19, 4:33 pm, kstubs <[email protected]> wrote:
>
>
>
> > 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" <[email protected]> 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 <[email protected]> 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 [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.
