Created
January 28, 2011 06:50
-
-
Save lsmith/799930 to your computer and use it in GitHub Desktop.
Subscribe to custom events on Nodes fired from some other object
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf=8"> | |
| <title>Test Page</title> | |
| </head> | |
| <body> | |
| <h3>Expected results:</h3> | |
| <ul> | |
| <li>Bubbled custom event</li> | |
| <li>Custom event from registry</li> | |
| <li>Custom event from registry</li></ul> | |
| <h3>Results:</h3> | |
| <ul id="results"></ul> | |
| <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui.js"></script> | |
| <script> | |
| YUI({ filter: 'raw' }).use('node', 'event-custom', function (Y) { | |
| /*** Approach #1 ***/ | |
| /* Use custom event bubbling to propagate an EventTarget's events to | |
| * a Node | |
| */ | |
| // Necessary because addTarget method is added to EventTarget after Node is | |
| // augmented with EventTarget's prototype methods (by copy, not extension) | |
| Y.mix(Y.Node, Y.EventTarget, true, null, 1); | |
| // prefix is necessary (of if extending Base, a static NAME property) | |
| var ControllerA = new Y.EventTarget({ emitFacade: true, prefix: 'goop' }); | |
| // the node that will emit custom events indirectly | |
| var node = Y.one('#results'); | |
| // Make events from Controller bubble to the node (but not its ancestors) | |
| ControllerA.addTarget(node); | |
| node.on('goop:foo', function () { | |
| this.append("<li>Bubbled custom event</li>"); | |
| }); | |
| ControllerA.fire('foo'); | |
| /*** Approach B ***/ | |
| /* Use a registration system in the EventTarget to fire a custom event | |
| * on all registered Nodes. Use the defaultFn of a triggering event | |
| * or method on the EventTarget to | |
| */ | |
| var ControllerB = new Y.EventTarget({ emitFacade: true, prefix: 'glop' }); | |
| ControllerB.register = function (node) { | |
| this._registry || (this._registry = []); | |
| this._registry.push(node); | |
| }; | |
| ControllerB.notifyNodes = function () { | |
| Y.Array.each(this._registry, function (node) { | |
| node.fire('ctrl:bar'); | |
| }); | |
| } | |
| ControllerB.publish('bar', { defaultFn: ControllerB.notifyNodes }); | |
| node.on('ctrl:bar', function () { | |
| this.append("<li>Custom event from registry</li>"); | |
| }); | |
| ControllerB.register(node); | |
| // Fire the triggering event from the EventTarget, allowing the trigger's | |
| // defaultFn to notify the registered Nodes. | |
| ControllerB.fire('bar'); | |
| // Alternately, just manually iterate the registered Nodes and fire the | |
| // custom event from each. | |
| ControllerB.notifyNodes(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment