Prototype's method of bind and bindAsEventListener, the latter being
more appropriate for your circumstance, creates a function closure.
The point of this is to maintain the proper "scope" so that all of
your instance's properties and methods are available in "callback"
functions. In the Event.observe method you're sending it a function
reference, but no scope reference, it would make sense as its
referenced as this.Method but its just the same as saying
MyClass.prototype.Method. By binding the function reference to the
object's this reference you ensure that "this" is always pointing to
your instance.
On May 2, 1:26 pm, Andreas Bachmann <[EMAIL PROTECTED]> wrote:
> I read about binding several times, but I didn't really understand ;)
> It's some sort of working now... I'll read this chapter again
>
> On 2 Mai, 19:18, Ken Snyder <[EMAIL PROTECTED]> wrote:
>
> > Andreas Bachmann wrote:
> > > Hi
>
> > > I'm new to prototype and have some problems creating a class...
> > > really!!
> > > I'm using script.aculo.us too, but it's not a problem... rightnow ;)
>
> > > My code:
>
> > > var ImageButton = Class.create({
> > > initialize: function(e) {
> > > this.e = e;
> > > this.e.observe('mouseover', this.onMousOver);
> > > this.e.observe('mouseout', this.onMousOut);
> > > },
>
> > > onMousOver: function() {
> > > this.fadeIn();
> > > },
>
> > > onMouseOut: function() {
> > > this.fadeOut();
> > > },
>
> > > fadeIn: function() {
> > > new Effect.Fade(e, { duration: 1 });
> > > },
>
> > > fadeOut: function() {
> > > new Effect.Appear(e, { duration: 1, from: 1.0, to: 1.0 });
> > > }
> > > });
>
> > > document.observe('dom:loaded' , function() {
> > > var previous = new ImageButton($('previous'));
> > > var next = new ImageButton($('next'));
> > > });
>
> > > --> Firebug result: this.fadeIn is not a function
>
> > > The same code but shorter:
>
> > > var ImageButton = Class.create({
> > > initialize: function(e) {
> > > this.e = e;
> > > this.e.observe('mouseover', this.fadeIn);
> > > this.e.observe('mouseout', this.fadeOut);
> > > },
>
> > > fadeIn: function() {
> > > new Effect.Fade(e, { duration: 1 });
> > > },
>
> > > fadeOut: function() {
> > > new Effect.Appear(e, { duration: 1, from: 1.0, to: 1.0 });
> > > }
> > > });
>
> > > document.observe('dom:loaded' , function() {
> > > var previous = new ImageButton($('previous'));
> > > var next = new ImageButton($('next'));
> > > });
>
> > > --> Firebug result: e is not defined
>
> > > Any advice to get to work?
>
> > On the first bit, you need to bind the functions to "this" since the
> > body of those functions reference "this". so:
>
> > initialize: function(e) {
> > this.e = e;
> > this.e.observe('mouseover', this.onMousOver.bind(this));
> > this.e.observe('mouseout', this.onMousOut.bind(this));
> > },
>
> > On the second bit, you forgot to put "e" as a parameter to fadeIn() and
> > fadeOut().
>
> > - Ken Snyder
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" 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/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
