Advice using View

[ncubeait]

Hi all,

Can anyone suggest a way to implement "mouseover" functionality on the items using the View component?

Is there no choice but to cycle through all the rendered templates and add handlers to each item, or is there some collective way of doing this?

Thanks, Will.

[JohnT]

Could you add a simple mouseover to the view?

view.on('mouseover', function(){
    alert('Mouseover here. Sweet');
});

[ncubeait]

Well, that would be amazing - however, 'mouseover' is not an event that is supported by the view component.

[JohnT]

Yep you are right. I am getting this error:

You are trying to listen for an event that does not exist: "mouseover".' when calling method:

I read all through the docs to try to help you, but resorted to looping through all nodes, as you mentioned.

Sorry I could not be any help.

JohnT.

[tryanDLS]

The View object may not directly implement mouseover events, but you certainly attach a handler to the underlying Element object to accomplish that.

[ncubeait]

Sure. Here's what I am currently doing:

var items = this.view.getNodes();
for (var i=0; i<items.length; i++) {
	var itemEl = YAHOO.ext.Element.get(items[i], true);
	itemEl.addClassOnOver('ydataview-over');
}

But this means that I also have to listen to the DataModel to handle the case where new items are added to the view.

I was just wondering if there was a more efficient way of doing this. Jack seems to be onto something with the QuickTips manager in version 0.4, but I haven;t dug into that code yet.

Will.

[tryanDLS]

Well, I wouldn't attempt to attach to every item - it's not efficient. I think a better way is to attach at the container level and let that handler decide whether the target is something that needs to have a mouseover action, or click or whatever.

[ncubeait]

Well, actually if you did that, you would have to repeatedly cycle through the item list to determine whether the user's mouse coordinates intersected with an item everytime the mouse moved within the view container area.

That can't be the most efficient way!
W.

[tryanDLS]

I wouldn't look at coordinates at all. If you have, say a div with 5 links, and 5 images, mouseover will fire when you go over one of those 10 items. At that point you determine if you're over a link or an image or potentially something else you don't care about, based on e.getTarget.

I am I not understanding what you're trying to do?

[JohnT]

Tim, remember this code chunk you helped me out with a while back:

			  	getEl("mycontainer").mon('mouseover', function(e){
					e.stopPropagation();									 
					var t = e.getTarget();
					
					/* Did they mouseover a SPAN ? */
					 if(t.tagName.toLowerCase() == 'span') {
							/* Get the node value */
							// Now do whatever you want
					 }

Is this what you are suggesting to him? If so, here it is.