Last active
December 25, 2015 19:49
-
-
Save sethladd/7030334 to your computer and use it in GitHub Desktop.
Lifecycle callback when an element leaves a view. The JavaScript version works (I see I leave you now in the console) but the Dart version doesn't display the 'I leave you now'. Note: the x-b and its children do disappear from the page. This code is about removed() in x-c not firing.
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>Sample app</title> | |
| <link rel="stylesheet" href="testme.css"> | |
| <!-- import the click-counter --> | |
| <link rel="import" href="clickcounter.html"> | |
| <!-- This is the bootstrap script for Polymer. | |
| Use this INSTEAD of dart.js --> | |
| <script src="packages/polymer/boot.js"></script> | |
| </head> | |
| <body> | |
| <polymer-element name="x-c"> | |
| <template> | |
| <p>hello from c</p> | |
| </template> | |
| <script type="application/dart"> | |
| import 'package:polymer/polymer.dart'; | |
| @CustomTag('x-c') | |
| class C extends PolymerElement { | |
| removed() { | |
| super.removed(); | |
| print('i leave you now'); | |
| } | |
| } | |
| </script> | |
| </polymer-element> | |
| <polymer-element name="x-b" noscript> | |
| <template> | |
| Hello from b | |
| <x-c></x-c> | |
| </template> | |
| </polymer-element> | |
| <polymer-element name="x-a"> | |
| <template> | |
| <button on-click="remove">Remove</button> | |
| <template if="{{isVisible}}"> | |
| <x-b></x-b> | |
| </template> | |
| </template> | |
| <script type="application/dart"> | |
| import 'package:polymer/polymer.dart'; | |
| @CustomTag('x-a') | |
| class A extends PolymerElement { | |
| @observable bool isVisible = true; | |
| remove(e, detail, target) { | |
| print('removing'); | |
| isVisible = false; | |
| } | |
| } | |
| </script> | |
| </polymer-element> | |
| <x-a></x-a> | |
| </body> | |
| </html> |
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>Sample app</title> | |
| <script src="polymer.min.js"></script> | |
| </head> | |
| <body> | |
| <polymer-element name="x-c"> | |
| <template> | |
| <p>hello from c</p> | |
| </template> | |
| <script> | |
| Polymer('x-c', { | |
| leftView: function() { | |
| console.log('I leave you now'); | |
| } | |
| }); | |
| </script> | |
| </polymer-element> | |
| <polymer-element name="x-b" noscript> | |
| <template> | |
| <p>hello from b</p> | |
| <x-c></x-c> | |
| </template> | |
| </polymer-element> | |
| <polymer-element name="x-a"> | |
| <template> | |
| <button on-click="remove">Remove</button> | |
| <template if="{{isVisible}}"> | |
| <x-b></x-b> | |
| </template> | |
| </template> | |
| <script> | |
| Polymer('x-a', { | |
| isVisible: true, | |
| remove: function(e, detail, target) { | |
| console.log('removing'); | |
| this.isVisible = false; | |
| } | |
| }); | |
| </script> | |
| </polymer-element> | |
| <x-a></x-a> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment