Version 3.17.2

Example: Creating a Universal Console

In this example, three YUI instances are created, each binding a button to call Y.log(...). Then an additional, separate YUI instance is created that requests only the console module and creates a Console that listens for log events from all three.

YUI #1

YUI #2

YUI #3

Multiple YUI instances

Each YUI instance is its own sandbox. You can create as many YUI instances on a page as you want or need (though typically one is enough). The variables, module configurations and instances are kept inside that instance unless you expressly expose them via a global variable.

// Create the first YUI instance
YUI().use("node", function (Y) {

    Y.one( "#yui1" ).on( "click", function () {
        Y.log( "Message from YUI instance #1" );
    });

});

// Create the second YUI instance
YUI().use("node", function (Y) {

    Y.one( "#yui2" ).on( "click", function () {
        Y.log( "I'm the second YUI instance" );
    });

});

// Create a third YUI instance
YUI().use("node", function (Y) {

    Y.one( "#yui3" ).on( "click", function () {
        Y.log( "And this is #3 YUI" );
    });

});

Listening to Y.Global

To address debugging such an environment, Console can be configured to listen for log messages across all YUI instances by setting the Console instance's logSource configuration to Y.Global.

We'll insert the universal Console into another YUI instance.

// Create a separate YUI instance to listen to all instances' logging
YUI().use("console", function (Y) {

    // Configure the Console's logSource to Y.Global to make it universal
    new Y.Console({
        logSource: Y.Global,
        style: 'block',
        newestOnTop: false,
        width: "250px"
    }).render( "#yconsole" );

});

Full Code Listing

Markup

<div id="demo" class="yui3-skin-sam">
    <div class="yui3-g">
        <div class="yui3-u-1-2 first">
            <h4>YUI #1</h4>
            <button type="button" id="yui1">Log from YUI instance #1</button>

            <h4>YUI #2</h4>
            <button type="button" id="yui2">Log from YUI instance #2</button>

            <h4>YUI #3</h4>
            <button type="button" id="yui3">Log from YUI instance #3</button>
        </div>
        <div class="yui3-u-1-2" id="yconsole">
        </div>
    </div>
    <div class="clr"></div>
</div>

JavaScript

<script>

// Create the first YUI instance
YUI().use("node", function (Y) {
    
    Y.one( "#yui1" ).on( "click", function () {
        Y.log( "Message from YUI instance #1" );
    });

});

// Create the second YUI instance
YUI().use("node", function (Y) {

    Y.one( "#yui2" ).on( "click", function () {
        Y.log( "I'm the second YUI instance" );
    });

});

// Create a third YUI instance
YUI().use("node", function (Y) {

    Y.one( "#yui3" ).on( "click", function () {
        Y.log( "And this is #3 YUI" );
    });

});

// Create a separate YUI instance to listen to all instances' logging
YUI().use("console", function (Y) {

    // Configure the Console's logSource to Y.Global to make it universal
    new Y.Console({
        logSource: Y.Global,
        style: 'inline',
        newestOnTop: false
    }).render( "#yconsole" );

});

</script>

CSS

<style>
#yconsole {
    text-align: right;
}

#demo .first button {
    margin-bottom: 2em;
}

#demo .yui3-console .yui3-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui3-console .yui3-console-entry-meta {
    margin: 0;
}

.clr {
    clear: both;
}
</style>