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