JavaScript YUI3 Global Variable

Question

I am using the YUI3 TabView component in the following format:

var tabview;
YUI().use('tabview', function(Y) {
    tabview = new Y.TabView({srcNode:'#demo'});
    alert (tabview); //defined
    tabview.render();
});
alert (tabview); //undefined

However, when I try to access the variable tabview outside its declaration function, I am getting an exception that the object is undefined. Can you kindly tell me what am I missing out please?

Answer 1

Edit: Also check JavaScript YUI3 using global variables?

Considering javascript's asynchronous nature, tabview is not necessarily rendered before alert() is called on it outside the YUI block. Seeing "undefined" in the alert box in this case means that the variable has been declared but not assigned to any value. If the variable wasn't accessible, alert() would fail due to an uncaught "ReferenceError".

So, in trying to guessing your intention, if you want to examine the tabview object, you might want to use console.log() instead of alert() to see the output in your browsers console, and put it within the YUI block right after render():

var tabview;
YUI().use('tabview', function(Y) {
    tabview = new Y.TabView({srcNode:'#demo'});
    console.log(tabview); //defined
    tabview.render();

    console.log(tabview);
});

In order to use tabview outside the YUI block, ensure that it is ready. As a quick example:

Y.on("domready", function() {
    console.log(tabview);
}