Hi,
I haven't been into the details of your specific situation, I just
happened to notice the suggestion to bind when using map and it jumped
out at me. But generally:
Say `this` points to an instance that has a flurgle property with the
value "bar". And so:
alert(this.flurgle);
...alerts "bar".
Within the map function, unless you specify context, `this` won't
refer to the instance anymore:
[1, 2].map(function(item) {
alert(this.flurgle + ": " + item);
});
...alerts "undefined: 1" and "undefined: 2" because `this` inside the
map function doesn't have the same value as `this` outside of it. But
map allows you to pass a second parameter specifying what `this`
should be inside the function:
[1, 2].map(function(item) {
alert(this.flurgle + ": " + item);
}, this);
...and so that alerts "bar: 1" and "bar: 2" as expected. Many of the
Enumerable methods have this optional second context parameter.
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Aug 21, 12:45 am, "Andy Daykin" <daykina...@gmail.com> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
