The way that my script is working on that page http://andydaykin.com/Home (http://andydaykin.com/Home/public/js/Home.js is the link to the javascript file) is how I want it to work, but I want to make my script fit the prototype conventions a little bit more.
So if I try and make instance variables, the doSlide function can't see them. As I stated before the scope of this inside of the map function is what is causing the problem I believe. The click handler (doSlide) won't recognize an instance variable. For instance if I say this.varName in my init function, and try and access this.varName in the doSlide function, the variable won't be recognized. To solve this I am using "var varName" outside of the class, but I would like to do this the "proper" way. -Andy -------------------------------------------------- From: "Daniel Rubin" <[email protected]> Sent: Tuesday, August 25, 2009 3:06 AM To: <[email protected]> Subject: [Proto-Scripty] Re: this keyword inside of the map function > > 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 -~----------~----~----~----~------~----~------~--~---
