Created
February 2, 2014 00:16
-
-
Save mraleph/8761172 to your computer and use it in GitHub Desktop.
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
| <div class="rows"> | |
| </div> |
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
| import 'dart:html'; | |
| import 'package:angular/angular.dart'; | |
| @NgComponent( | |
| selector: 'editor', | |
| map: const { | |
| 'lines': '=>lines', | |
| 'widgets': '=>widgets', | |
| }, | |
| templateUrl: 'packages/TryNg/editor.html', | |
| publishAs: 'ed' | |
| ) | |
| class EditorComponent extends NgShadowRootAware { | |
| var lines; | |
| var widgets; | |
| Element _root; | |
| EditorComponent(Scope scope) { | |
| // Is this the only way to detect change in the current scope and rerender? | |
| scope.$watchSet(["ed.lines", "ed.widgets"], (oldValues, newValue, scope) { | |
| render(); | |
| }); | |
| } | |
| onShadowRoot(shadowRoot) { | |
| _root = shadowRoot.querySelector(".rows"); | |
| render(); | |
| } | |
| // Rendering function builds some DOM depending on both lines and widgets. | |
| // How to fire it other than by watching dependencies manually? | |
| // Is there any Scope.$onAnythingChanged? | |
| render() { | |
| if (_root == null) return; | |
| _root.nodes.clear(); | |
| _root.nodes.add( | |
| new Element.html("<table><tr><td>lines</td><td>${lines}</td></tr>" | |
| "<tr><td>widgets</td><td>${widgets}</td></tr></table>") | |
| ); | |
| } | |
| } | |
| @NgController( | |
| selector: '[empty-controller]', | |
| publishAs: 'data') | |
| class DataController { | |
| var lines = "1,2,3"; | |
| var widgets = "3,4,5"; | |
| // Update both. | |
| updateSmth() { | |
| lines += lines; | |
| widgets += widgets; | |
| } | |
| } | |
| class M extends Module { | |
| M() { | |
| type(DataController); | |
| type(EditorComponent); | |
| } | |
| } | |
| main() { | |
| ngBootstrap(module: new M()); | |
| } |
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 ng-app> | |
| <body> | |
| <div empty-controller> | |
| <button ng-click="data.updateSmth()">Update</button> | |
| <editor lines="data.lines" widgets="data.widgets"></editor> | |
| </div> | |
| <script src="packages/shadow_dom/shadow_dom.min.js"></script> | |
| <script type="application/dart" src="index.dart"></script> | |
| <script src="packages/browser/dart.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment