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