console-global.mustache revision 819e90d415ed17d59af3a247b2ad9d6feb0c21b5
1687N/A{{>console-global-css}}
1687N/A
1687N/A<div class="intro">
1687N/A <p>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.</p>
1687N/A</div>
1687N/A
1687N/A<div class="example yui3-skin-sam">
1687N/A {{>console-global-markup}}
1687N/A {{>console-global-js}}
1687N/A</div>
1687N/A
1687N/A<h3 class="first">Multiple YUI instances</h3>
1687N/A<p>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.</p>
1687N/A
1687N/A```
1687N/A// Create the first YUI instance
1687N/AYUI($yuiConfig).use($requiredModules, function (Y) {
1687N/A
1687N/A Y.one( "#yui1" ).on( "click", function () {
1687N/A Y.log( "Message from YUI instance #1" );
1687N/A });
1687N/A
1687N/A});
1687N/A
1687N/A// Create the second YUI instance
1687N/AYUI($yuiConfig).use($requiredModules, function (Y) {
1687N/A
1687N/A Y.one( "#yui2" ).on( "click", function () {
1687N/A Y.log( "I'm the second YUI instance" );
1687N/A });
1687N/A
1687N/A});
1687N/A
1687N/A// Create a third YUI instance
1687N/AYUI($yuiConfig).use($requiredModules, function (Y) {
1687N/A
1687N/A Y.one( "#yui3" ).on( "click", function () {
1687N/A Y.log( "And this is #3 YUI" );
1687N/A });
1687N/A
1687N/A});
1687N/A```
1687N/A
1687N/A<h3>Listening to `Y.Global`</h3>
1687N/A<p>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`.</p>
1687N/A
1687N/A<p>We'll insert the universal Console into another YUI instance.</p>
1687N/A
1687N/A```
1687N/A// Create a separate YUI instance to listen to all instances' logging
1687N/AYUI($yuiConfig).use("console", function (Y) {
1687N/A
1687N/A // Configure the Console's logSource to Y.Global to make it universal
1687N/A new Y.Console({
1687N/A logSource: Y.Global,
1687N/A style: 'block',
1687N/A newestOnTop: false,
1687N/A width: "250px"
1687N/A }).render( "#yconsole" );
1687N/A
1687N/A});
1687N/A```
1687N/A
1687N/A<h3>Full Code Listing</h3>
1687N/A
1687N/A<h4>Markup</h4>
1687N/A```
1687N/A{{>console-global-markup}}
1687N/A```
1687N/A
2122N/A<h4>JavaScript</h4>
1687N/A```
2122N/A{{>console-global-js}}
2122N/A```
2122N/A
2122N/A<h4>CSS</h4>
2122N/A```
2122N/A{{>console-global-css}}
2122N/A```
2122N/A