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?
--~--~---------~--~----~------------~-------~--~----~
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
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 <kendsny...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 <ba...-ZqUqPQvkRNZyDzI6CaY1VQ@public.gmane.org> 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 <kendsny...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
FWIW, you also seem to have a frequent typo where you accidentally drop the "e" on "Mouse": These don''t have the "e":> this.e.observe(''mouseover'', this.onMousOver); > this.e.observe(''mouseout'', this.onMousOut);But this does:> onMouseOut: function() { > this.fadeOut(); > },So the second observe line above will fail. The first one works because you''ve dropped the "e" in both the observe call *and* the function definition. About a month ago I blogged about the "this" thing, might be useful: http://blog.niftysnippets.org/2008/04/you-must-remember-this.html Hope this helps, -- T.J. Crowder tj / crowder software / com On May 2, 6:07 pm, Andreas Bachmann <ba...-ZqUqPQvkRNZyDzI6CaY1VQ@public.gmane.org> 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?--~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---