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
-Andy -------------------------------------------------- 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 -~----------~----~----~----~------~----~------~--~---
