1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>console-global-css}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<div class="intro">
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly <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>
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {{>console-global-markup}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly {{>console-global-js}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h3 class="first">Multiple YUI instances</h3>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<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>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Create the first YUI instance
23ff6653cdedaef9f44c605d3bc665856a784e5cDerek GathrightYUI().use("node", function (Y) {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly Y.one( "#yui1" ).on( "click", function () {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly Y.log( "Message from YUI instance #1" );
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Create the second YUI instance
23ff6653cdedaef9f44c605d3bc665856a784e5cDerek GathrightYUI().use("node", function (Y) {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly Y.one( "#yui2" ).on( "click", function () {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly Y.log( "I'm the second YUI instance" );
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Create a third YUI instance
23ff6653cdedaef9f44c605d3bc665856a784e5cDerek GathrightYUI().use("node", function (Y) {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly Y.one( "#yui3" ).on( "click", function () {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly Y.log( "And this is #3 YUI" );
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h3>Listening to `Y.Global`</h3>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<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>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<p>We'll insert the universal Console into another YUI instance.</p>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly// Create a separate YUI instance to listen to all instances' logging
23ff6653cdedaef9f44c605d3bc665856a784e5cDerek GathrightYUI().use("console", function (Y) {
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly // Configure the Console's logSource to Y.Global to make it universal
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly style: 'block',
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly newestOnTop: false,
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly width: "250px"
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly }).render( "#yconsole" );
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h3>Full Code Listing</h3>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h4>Markup</h4>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>console-global-markup}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly<h4>JavaScript</h4>
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>console-global-js}}
b96d996309309541dc72ee198c96c06e1b16bbfeJenny Donnelly{{>console-global-css}}