In YUI, is there a way to reference the tab or tabview objects from the DOM?

Question

It seems like there should be, but I've looked over the API and nada. I don't see how it's done in 2.x. Currently, I store references with the elements to the tab and tabview objects via jQuery's data method.

The why: When I interact with the tabs via mouseovers and clicks, I need to be able to reference the YUI tab/tabview objects' properties & methods. Since I'm using event delegation b/c I have so many tabs (tabs within tabs), I'm not directly attaching (potentially hundreds of) event listeners, and thus I don't have access to the tabs and tabviews via the this symbol.

There's a corresponding method for buttons (YAHOO.widget.Button.getButton) but not one for tabs unless I'm missing something obvious.

Additionally, it seems that if I have a tab object, there's not a reference to the tabview. Once again, I create my own reference, but I assume there should be a reference or an accessor method already.

Can anyone shed any light on this? Anyone else approaching this differently?

Answer 1

have you tried using Firebug, using the DOM tab/DOM subpanel, and actually looking through the attributes/properties/methods on the document and/or related elements? It's usually the fastest way to see what you can access.

also worthwhile to do a for..in loop to enumerate all of the properties/methods of a returned object if you are unsure what is available and unable to get that info via firebug.

e.g.

var properties = "";
for (prop in obj) {
    properties += prop+"\n";
}
alert(properties);

This is true in most cases, not just your particular question.

EDIT Having just checked the YUI examples for tabview, I see there is no property on the DOM elements for the tabs that refer to JS objects. I suppose this has been done to avoid DOM pollution, but it looks like you may have to make those reference yourself when creating the tabs/tabviews

e.g.

var tabView = new YAHOO.widget.TabView('demo');
document.getElementById("demo").tabView = tabView;

Answer 2

Hi Keith,

The best place for YUI questions are the forums on yuilibrary.com.

The YUI TabView component has event delegation built-in. Every Tab event is actually handled by the TabView that it belongs to. Each events is routed to the appropriate Tab, and the context of the handler is set to the Tab.

This allows you to assign your listeners as you normally would:

tabview.getTab(1).on('mouseover', function(e) { console.log(e.target.innerHTML); // e.target === Tab Label Element console.log(this.get('label')); // this === Tab instance });

This works for nested TabViews as well.

There is currently no binding between Tab and TabView except for the TabView's "tabs" attribute. You can iterate this collection and compare your element to each Tab's "element" attribute if there is a use-case for knowing which TabView it belongs to.