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" <dru...@dimedis.de>
Sent: Tuesday, August 25, 2009 3:06 AM
To: <prototype-scriptaculous@googlegroups.com>
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" <dru...@dimedis.de>
>> Sent: Friday, August 21, 2009 3:38 AM
>> To: <prototype-scriptaculous@googlegroups.com>
>> 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" <t...@crowdersoftware.com>
>>>> Sent: Thursday, August 20, 2009 3:56 AM
>>>> To: "Prototype & script.aculo.us"
>>>> <prototype-scriptaculous@googlegroups.com>
>>>> 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 <dru...@dimedis.de> 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 prototype-scriptaculous@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
-~----------~----~----~----~------~----~------~--~---

Reply via email to