[Proto-Scripty] Re: this keyword inside of the map function
Thanks a lot! It's working perfectly now!
-Andy
--
From: "Daniel Rubin"
Sent: Wednesday, August 26, 2009 3:01 AM
To:
Subject: [Proto-Scripty] Re: this keyword inside of the map function
>
> Andy Daykin wrote:
>> 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
> Alright, I'll just post how I believe it should work.
>
> //
> initialize: function (parentDiv, featuresWrapper) {
>var features = $(featuresWrapper).descendants ();
>$(parentDiv).descendants ().map (function (e, i) {
>$(e).observe ('click',
> this.doSlide.bind (this, features[i].id));
>}, this);
>
>slides = $$('.featureImage').map (function (e) {
>return e.id;
>});
> },
> //
>
> 1) I threw out the dom:loaded-handling stuff: The particular SlideShow
>object should be created in such a handler, of course, but listening
>for the event in the constructor would limit the class' use to this
>application only.
>Instead, put
> var mySlide = new SlideShow ('featureList', 'featuresWrapper');
>in your global dom:loaded handler in the main HTML file. (But make
>sure to load Home.js first.)
>
> 2) The featuresWrapper Element is passed as constructor arg now, too.
>No point in hard-coding it, I think.
>
> 3) Note "this" as the second parameter to the map-call. That's the
>"context"-param T. J. pointed out. By passing "this", we ensure
>that "this" is the same inside and outside the mapping-function.
>
> 4) The mapping-function takes a second parameter "i", which is just
>the old counter "i", but readily provided by the map-iteration.
>
> I hope this works -- I have not tested it myself.
>
> Have fun
> Daniel
>
>
>
>> --
>> From: "Daniel Rubin"
>> Sent: Tuesday, August 25, 2009 3:06 AM
>> To:
>> 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"
>>>> Sent: Friday, August 21, 2009 3:38 AM
>>>> To:
>>>> 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 examp
[Proto-Scripty] Re: this keyword inside of the map function
Andy Daykin wrote:
> 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
Alright, I'll just post how I believe it should work.
//
initialize: function (parentDiv, featuresWrapper) {
var features = $(featuresWrapper).descendants ();
$(parentDiv).descendants ().map (function (e, i) {
$(e).observe ('click',
this.doSlide.bind (this, features[i].id));
}, this);
slides = $$('.featureImage').map (function (e) {
return e.id;
});
},
//
1) I threw out the dom:loaded-handling stuff: The particular SlideShow
object should be created in such a handler, of course, but listening
for the event in the constructor would limit the class' use to this
application only.
Instead, put
var mySlide = new SlideShow ('featureList', 'featuresWrapper');
in your global dom:loaded handler in the main HTML file. (But make
sure to load Home.js first.)
2) The featuresWrapper Element is passed as constructor arg now, too.
No point in hard-coding it, I think.
3) Note "this" as the second parameter to the map-call. That's the
"context"-param T. J. pointed out. By passing "this", we ensure
that "this" is the same inside and outside the mapping-function.
4) The mapping-function takes a second parameter "i", which is just
the old counter "i", but readily provided by the map-iteration.
I hope this works -- I have not tested it myself.
Have fun
Daniel
> --
> From: "Daniel Rubin"
> Sent: Tuesday, August 25, 2009 3:06 AM
> To:
> 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"
>>> Sent: Friday, August 21, 2009 3:38 AM
>>> To:
>>> 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"
>>>>> Sent: Thursday, August 20, 2009 3:56 AM
>>>>> To: "Prototype & script.aculo.us"
>>>>>
>>>>> Subject: [Proto-Scripty] Re: this keyword inside of the map function
>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> Rather t
[Proto-Scripty] Re: this keyword inside of the map function
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"
Sent: Tuesday, August 25, 2009 3:06 AM
To:
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"
>> Sent: Friday, August 21, 2009 3:38 AM
>> To:
>> 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"
>>>> Sent: Thursday, August 20, 2009 3:56 AM
>>>> To: "Prototype & script.aculo.us"
>>>>
>>>> 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 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(feat
[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"
> Sent: Friday, August 21, 2009 3:38 AM
> To:
> 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"
>>> Sent: Thursday, August 20, 2009 3:56 AM
>>> To: "Prototype & script.aculo.us"
>>>
>>> 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 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].i
[Proto-Scripty] Re: this keyword inside of the map function
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
-Andy
--
From: "Daniel Rubin"
Sent: Friday, August 21, 2009 3:38 AM
To:
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"
>> Sent: Thursday, August 20, 2009 3:56 AM
>> To: "Prototype & script.aculo.us"
>>
>> 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 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 list
[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"
> Sent: Thursday, August 20, 2009 3:56 AM
> To: "Prototype & script.aculo.us"
> 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 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[point
[Proto-Scripty] Re: this keyword inside of the map function
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" 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"
> Sent: Thursday, August 20, 2009 3:56 AM
> To: "Prototype & script.aculo.us"
> 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 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;
>
>
[Proto-Scripty] Re: this keyword inside of the map function
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"
Sent: Thursday, August 20, 2009 3:56 AM
To: "Prototype & script.aculo.us"
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 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
[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 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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: this keyword inside of the map function
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: this keyword inside of the map function
I tried putting this as the first argument to bind, but the function doesn't
get called. Am I using the right syntax for calling the function
-Andy
--
From: "Kevin Porter"
Sent: Wednesday, August 19, 2009 5:14 PM
To:
Subject: [Proto-Scripty] Re: this keyword inside of the map function
>
>
>> 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));
>>
> You need to pass 'this' as the first argument to bind().
>
> regards,
>
> - Kev
>
> --
> Kevin Porter
> Advanced Web Construction Ltd
> http://webutils.co.uk
> http://billiardsearch.net
> http://9ballpool.co.uk
>
> AJAX Blackjack - real-time multi-player blackjack game with no flash, java
> or software downloads required - http://blackjack.webutils.co.uk
>
>
>
> >
>
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: this keyword inside of the map function
> 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));
>
You need to pass 'this' as the first argument to bind().
regards,
- Kev
--
Kevin Porter
Advanced Web Construction Ltd
http://webutils.co.uk
http://billiardsearch.net
http://9ballpool.co.uk
AJAX Blackjack - real-time multi-player blackjack game with no flash, java or
software downloads required - http://blackjack.webutils.co.uk
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
