Rails spinoffs - Mar 2008 - Event.observer with bindAsEventListener(this)

Hi,

I''m fairly new to Prototype and am experiencing a slight problem in
getting an event observed. I''ve had a quick browse through the list
and can''t find an example of the exact issue I''m having here.
Basically I have a class, and as part of the initialization of the
class it adds an event listener to an array of links around thumbnail
images. I want it to call a function from within the class, passing
the event and the thumbnail image object, I am using the following
line of code to achieve this:

Event.observe(thumbnaillink, ''click'',
this.alertImage.bindAsEventListener(this,
thumbnaillink.firstDescendant()));

This just doesn''t work - it doesn''t create a firebug error
(and I
don''t know where else I could look for errors). Interestingly if I
explicitly write the function in line it does work i.e:

Event.observe(thumbnail, ''click'', function(e){
	var clickedimage = $A(arguments)[1];
	alert(''Clicked the following image '' +
clickedimage.readAttribute(''src''));
}.bindAsEventListener(this, thumbnaillink.firstDescendant()));

But I didn''t really want to write the code in this fashion (seems less
tidy, and, of course, I will be wanting to do much more with the
clicked image than display an alert with the scr attribute).

Here is the full class for context, any help (on any of the techniques
used, not necessarily just this problem) will be much appreciated:

var ImageViewer = Class.create({

	initialize: function(){
		this.mainimage = $(''mainimage'').firstDescendant();
		this.thumbnaildiv = $(''thumbnails'').firstDescendant();
		this.thumbnaillinks = $(this.thumbnaildiv).childElements();

		this.thumbnaillinks.each(function(thumbnaillink) {
			// The following 4 lines work!
			//Event.observe(thumbnail, ''click'', function(e){
			//	var clickedimage = $A(arguments)[1];
			//	alert(''Clicked the following image '' +
clickedimage.readAttribute(''src''));
			//}.bindAsEventListener(this, thumbnaillink.firstDescendant()));
			Event.observe(thumbnaillink, ''click'',
this.alertImage.bindAsEventListener(this,
thumbnaillink.firstDescendant()));
			thumbnaillink.removeAttribute(''href'');
		} );
	},

	/**
	 * Called when a thumbnail is clicked
	 */

	alertImage: function(e){
		var clickedimage = $A(arguments)[1];
		alert(''Clicked the following image '' +
clickedimage.readAttribute(''src''));
	}

});

Event.observe(window, ''load'', function() {
	try {
		if ($(''mainimage'')) {
			new ImageViewer();
		}
	}
	catch(Error) {}
});
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---

There''s a couple things that should be mentioned here: how you fetch
descendent elements, how you attach event listeners and bind to
anonymous functions, and lastly, how you fetch the element that fired
the event.

For the first bit, you had this:
>                 this.mainimage =
$(''mainimage'').firstDescendant();
>                 this.thumbnaildiv =
$(''thumbnails'').firstDescendant();
>                 this.thumbnaillinks = $(this.thumbnaildiv).childElements();
Not knowing your document structure or what you''re trying to achieve,
I can only make guesses here. But you want to use prototype methods to
fetch nodes rather than DOM methods, so that they are extended
appropriately. Like:

this.mainImage = $(''mainimage'').down(); // get the first
descendent
this.thumbnailDiv = $(''thumbnails'').down(); // first
descendent
this.thumbnails = this.thumbnailDiv.select(''li a img''); //
insert your
selector here

You need to do is bind your anonymous functions to the instance of
your class, so that when you say ''this'', you really get what
you are
expecting. You do not want to bind the object as event listener, nor
do you want to pass in any additional arguments to the bind method.
You have everything you need already available to you.

this.thumbnaillinks.each(function(thumbnaillink) {
  thumbnaillink.observe(''click'',
this.alertImage.bindAsEventListener(this));
}.bind(this));

And in your click handler, to fetch the clicked element, you can just do:

alertImage: function(event){
  var clicked = event.element();
  // if there are child nodes on this element, you may need to pass the
  // tagname you are trying to fetch as an argument to the element()
call, such as:
  // var clicked = event.element(''img'');
}

Good luck and have a great day.

-justin

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