Andy Daykin wrote: > The doSlide function was what I was referring to. I tried using TJ's > suggestion of using this as the 2nd parameter, but the handler still wasn't > getting called. You can find a prototype of what I am doing at > http://andydaykin.com/Home. The slideshow (images obviously missing) is on > the main page. The javascript file for the class is > http://andydaykin.com/Home/public/js/Home.js Could you please provide the current state once more? Perhaps stripped down to the vital parts of HTML and scripts? I think we need to have a look at the details here.
----Daniel > -------------------------------------------------- > From: "Daniel Rubin" <[email protected]> > Sent: Friday, August 21, 2009 3:38 AM > To: <[email protected]> > Subject: [Proto-Scripty] Re: this keyword inside of the map function > >> Andy Daykin wrote: >>> I tried the first suggestion, but the function still isn't getting >>> called. >> Exactly which function do you refer to? The map-iterator-func ("function >> (e) { ... }") or the click-handler (this.doSlide)? >> >> ----Daniel >> >> >> >>> TJ, can you explain more, or show an example of what the context param >>> would >>> look like? Should I just put the doSlide function as the 2nd parameter? >>> >>> -Andy >>> >>> -------------------------------------------------- >>> From: "T.J. Crowder" <[email protected]> >>> Sent: Thursday, August 20, 2009 3:56 AM >>> To: "Prototype & script.aculo.us" >>> <[email protected]> >>> Subject: [Proto-Scripty] Re: this keyword inside of the map function >>> >>>> Hi, >>>> >>>> Rather than binding it, use the second parameter to map (aka collect >>>> [1]), that's what the second param ("context") is for. You'll find >>>> that most of the Enumerable methods that take callbacks also take a >>>> context parameter so the callback can be a method. >>>> >>>> [1] http://prototypejs.org/api/enumerable/collect >>>> >>>> HTH, >>>> -- >>>> T.J. Crowder >>>> tj / crowder software / com >>>> Independent Software Engineer, consulting services available >>>> >>>> >>>> On Aug 20, 8:34 am, Daniel Rubin <[email protected]> wrote: >>>>> Andy Daykin wrote: >>>>>> Hello, I am having some difficulties writing a class, in my code I >>>>>> have >>>>>> a class where I need to be able to bind event listeners to values. In >>>>>> my code I want the variable pointerIndex to be accessible outside of >>>>>> the initialize function, but right now it is not. If I make a global >>>>>> variable for pointerIndex I can solve the problem, but I would rather >>>>>> have a class variable using the this keyword. >>>>>> I am not positive, but I believe the problem is from my event >>>>>> listeners >>>>>> on the line: >>>>>> Now: $(e).observe('click', this.doSlide.bind(featuresWrapper[i].id)); >>>>>> Before: (working) $(e).observe('click', >>>>>> mySlide.doSlide.curry(featuresWrapper[i].id)); >>>>>> With the new way of calling the doSlide function I can't even seem to >>>>>> be able to call the function, nothing happens when the function should >>>>>> get called. Before I was using the curry function to try and pass the >>>>>> values of the featuresWrapper array to the doSlide function. I was >>>>>> able >>>>>> to get that to work, but I would rather just use bind and this to make >>>>>> the code more object oriented. Based on my alert statements I can tell >>>>>> that the this keyword is different inside and outside of the map >>>>>> function. >>>>> Hi Andy, >>>>> >>>>> the last observation is crucial. Because this is not your expected >>>>> SlideShow instance when you do this.doSlide.bind (...), this.doSlide is >>>>> undefined and thus the call to this.doSlide.bind fails (there should be >>>>> an exception in the error console somewhere). >>>>> >>>>> You can solve it by bind()-ing the map function, too: >>>>> $(parentDiv).childElements().map( (function(e) { >>>>> $(e).observe('click', >>>>> this.doSlide.bind(this, featuresWrapper[i].id)); >>>>> }).bind (this) ); >>>>> >>>>> (Note: Passing this as first arg to the inner bind call, as Kevin >>>>> suggested, is needed, too.) >>>>> >>>>> Have fun >>>>> ----Daniel >>>>> >>>>> >>>>> >>>>>> var SlideShow = Class.create({ >>>>>> initialize: function(parentDiv) { >>>>>> this.pointerIndex = 0; >>>>>> //pointerIndex = 0; >>>>>> // Load the event listener for each section >>>>>> document.observe("dom:loaded", function() { >>>>>> var featuresWrapper = $('featuresWrapper').childElements(); >>>>>> var i = 0; >>>>>> alert(this); >>>>>> $(parentDiv).childElements().map(function(e) { >>>>>> alert(this); >>>>>> $(e).observe('click', this.doSlide.bind(featuresWrapper[i].id)); >>>>>> //$(e).observe('click', mySlide.doSlide.curry(featuresWrapper[i].id)); >>>>>> i++; >>>>>> }); >>>>>> slides = $$('.featureImage').map(function(e) { >>>>>> return e.id; >>>>>> }); >>>>>> }); >>>>>> }, >>>>>> doSlide: function(slideClicked) { >>>>>> alert('here'); >>>>>> if(active == 0) { >>>>>> active = 1; >>>>>> var yValCurrent = $(slides[this.pointerIndex]).viewportOffset().top; >>>>>> //var yValCurrent = $(slides[pointerIndex]).viewportOffset().top; >>>>>> var yValClick = $(slideClicked).viewportOffset().top; >>>>>> var yValDiff = yValClick - yValCurrent; >>>>>> var pointerShift = 0; >>>>>> if (Math.abs(yValDiff) == Math.abs(210)) { >>>>>> pointerShift = 70; // Change this to get the height as well as a few >>>>>> more >>>>>> } >>>>>> else { >>>>>> pointerShift = 140; >>>>>> } >>>>>> if (yValDiff > 0) { >>>>>> $$('.featureImage').map(function(e) { >>>>>> new Effect.Move(e, { y: -yValDiff, duration: .8, afterFinish: >>>>>> function(e) { active = 0; } }); >>>>>> }); >>>>>> new Effect.Move('featurePointer', { y: pointerShift }); >>>>>> } >>>>>> else if (yValDiff < 0) { >>>>>> $$('.featureImage').map(function(e) { >>>>>> new Effect.Move(e, { y: -yValDiff, duration: .8, afterFinish: >>>>>> function(e) { active = 0; } }); >>>>>> }); >>>>>> new Effect.Move('featurePointer', { y: -pointerShift }); >>>>>> } >>>>>> this.pointerIndex = slides.indexOf(slideClicked); >>>>>> } >>>>>> } >>>>>> }); >>>>>> var slides; >>>>>> var active = 0; >>>>>> //var pointerIndex = 0; >>>>>> var mySlide = new SlideShow('featureList'); --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
