I tried the first suggestion, but the function still isn't getting called.
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
-~----------~----~----~----~------~----~------~--~---
