Last active
February 23, 2017 18:28
-
-
Save deap82/3f84693a20dc3d708da0850f69257212 to your computer and use it in GitHub Desktop.
AURELIA: attached() not called on custom element inside enhanced area.
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
| <template> | |
| <square></square> | |
| </template> |
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
| export class App { | |
| message = 'Hello World!'; | |
| } |
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> | |
| <title>Aurelia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <fieldset> | |
| <legend>aurelia-app="main"</legend> | |
| <div aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> | |
| <script> | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </div> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Enhanced</legend> | |
| <div id="enhanced"> | |
| <square></square> | |
| <br /><br /> | |
| <fieldset> | |
| <legend>Component with workaround</legend> | |
| <square-workaround></square-workaround> | |
| </fieldset> | |
| </div> | |
| </fieldset> | |
| </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
| import { Aurelia, TemplatingEngine } from 'aurelia-framework' | |
| export function configure(aurelia: Aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .globalResources(['square', 'square-workaround']); | |
| aurelia.start().then(() => { | |
| aurelia.setRoot() | |
| let templatingEngine = aurelia.container.get(TemplatingEngine); | |
| templatingEngine.enhance({ | |
| container: aurelia.container, | |
| element: document.querySelector('#enhanced'), | |
| resources: aurelia.resources | |
| }); | |
| }); | |
| } |
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
| <template> | |
| <div ref="square" style="width: 50px; height: 50px; background-color: red;"></div> | |
| <div textcontent.bind="message"></div> | |
| </template> |
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
| export class SquareWorkaround { | |
| message = "attached() has NOT been called."; | |
| square: HtmlElement; | |
| hasAttached: boolean; | |
| attachedIntervalHandle: any; | |
| attempts: number = 0; | |
| constructor() { | |
| this.attachedIntervalHandle = setInterval(() => { | |
| this.attempts++; | |
| if (this.square) { | |
| clearInterval(this.attachedIntervalHandle); | |
| this.attached(); | |
| } | |
| }, 50); | |
| } | |
| attached() { | |
| if (this.hasAttached) { | |
| return; | |
| } | |
| this.hasAttached = true; | |
| this.message = "attached() has been called after " + this.attempts + " attempts.";; | |
| } | |
| } |
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
| <template> | |
| <div style="width: 50px; height: 50px; background-color: blue;"></div> | |
| <div textcontent.bind="message"></div> | |
| </template> |
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
| export class Square { | |
| message = "attached() has NOT been called."; | |
| attached() { | |
| this.message = "attached() has been called."; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment