Last active
June 28, 2017 14:09
-
-
Save deap82/01185200db24485a4d4d087eb8d2e42b to your computer and use it in GitHub Desktop.
AURELIA life cycle: normal vs enhanced
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> | |
| <fieldset> | |
| <legend>router-view</legend> | |
| <router-view></router-view> | |
| </fieldset> | |
| </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!'; | |
| configureRouter(config, router) { | |
| config.map([ | |
| { route: '', redirect: 'welcome' }, | |
| { route: 'welcome', name: 'welcome', moduleId: 'welcome', nav: true }, | |
| { route: 'contact', name: 'contact', moduleId: 'contact', nav: true } | |
| ]); | |
| } | |
| } |
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="wrapper"> | |
| <h1>This is the Contact view</h1> | |
| <square name="contact"></square> | |
| </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
| import { ViewBase } from 'view-base'; | |
| export class Contact extends ViewBase { | |
| created() { | |
| //console.log('Contact created') | |
| } | |
| attached() { | |
| this.enhance('Contact'); | |
| //console.log('Contact attached') | |
| } | |
| detached() { | |
| //console.log('Contact detached') | |
| } | |
| } |
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> | |
| <a href="#/welcome">Welcome</a> | |
| <a href="#/contact">Contact</a> | |
| <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 | |
| src="https://code.jquery.com/jquery-3.2.1.slim.min.js" | |
| integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" | |
| crossorigin="anonymous"></script> | |
| <script> | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </div> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Enhanced</legend> | |
| <div id="enhanced"></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']); | |
| aurelia.start().then(() => { | |
| aurelia.setRoot() | |
| /*let templatingEngine = aurelia.container.get(TemplatingEngine); | |
| var result = templatingEngine.enhance({ | |
| container: aurelia.container, | |
| element: document.querySelector('#enhanced'), | |
| resources: aurelia.resources | |
| }); | |
| result.attached();*/ | |
| }); | |
| } |
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> | |
| </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
| import { bindable } from 'aurelia-framework'; | |
| export class Square { | |
| @bindable log = true; | |
| @bindable name = 'unnamed'; | |
| created() { | |
| if(this.log) { | |
| console.log(`Square '${this.name}' created`); | |
| } | |
| } | |
| attached() { | |
| if(this.log) { | |
| console.log(`Square '${this.name}' attached`); | |
| } | |
| } | |
| detached() { | |
| if(this.log) { | |
| console.log(`Square '${this.name}' detached`); | |
| } | |
| } | |
| } | |
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 { inject, TemplatingEngine, Aurelia } from 'aurelia-framework'; | |
| @inject(Aurelia, TemplatingEngine) | |
| export class ViewBase { | |
| aurelia: Aurelia; | |
| templatingEngine: TemplatingEngine; | |
| enhancedView; | |
| constructor(aurelia, templatingEngine) { | |
| this.aurelia = aurelia; | |
| this.templatingEngine = templatingEngine; | |
| } | |
| enhance(viewName) { | |
| var html = `<h1>This is the enhanced ${viewName} view</h1><square name="enhanced ${viewName}"></square>`; | |
| var enhanced = $('#enhanced'); | |
| enhanced.html(html); | |
| this.enhancedView = this.templatingEngine.enhance({ | |
| container: this.aurelia.container, | |
| element: document.querySelector('#enhanced'), | |
| resources: this.aurelia.resources | |
| }); | |
| } | |
| deactivate() { | |
| console.log(this.enhancedView); //This view has no children!!! | |
| this.enhancedView.detached(); | |
| } | |
| } |
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="wrapper"> | |
| <h1>This is the Welcome view</h1> | |
| <square name="welcome"></square> | |
| </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
| import { ViewBase } from 'view-base'; | |
| export class Welcome extends ViewBase { | |
| created() { | |
| //console.log('Welcome created'); | |
| } | |
| attached() { | |
| this.enhance('Welcome'); | |
| //console.log('Welcome attached'); | |
| } | |
| detached() { | |
| console.log('Welcome detached'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment