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