-
-
Save davismj/528b157f944825cdeb3938d16ef171cd to your computer and use it in GitHub Desktop.
Aurelia Dependency Injection Inheritance
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> | |
| <require from="./elem1"></require> | |
| <require from="./elem2"></require> | |
| <elem1 view-model.ref="elem1"> | |
| <h3>inside Elem1</h3> | |
| <!-- don't process elem2 until Elem1 attached --> | |
| <div if.bind="elem1.ready"> | |
| <elem2> | |
| </elem2> | |
| </div> | |
| </elem1> | |
| </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 { | |
| } |
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 { | |
| customElement, | |
| inlineView, | |
| bindable, | |
| inject, | |
| Container | |
| } from 'aurelia-framework'; | |
| import {Service} from './service'; | |
| @inject(Container) | |
| @customElement("elem1") | |
| @inlineView("<template>Elem1 Service Name:${service.name}<slot></slot></template>") | |
| export class Elem1 { | |
| @bindable ready; | |
| constructor(container) { | |
| this.container = container; | |
| this.ready = false; | |
| } | |
| bind(bindingContext) { | |
| //I want all instances of child elements (not rendered until attached is complete) | |
| //to return this instance of Service | |
| //I'm trying to refactor code where I pass around instances via binding. It's becoming | |
| //tedious as I get more and more elemenents and I have some recursion of this | |
| //element in a component tree that should create a new Service instance. | |
| console.log('Registering Service Instance ') | |
| this.service1 = new Service('Elem1Service1'); | |
| this.service2 = new Service('Elem1Service2'); | |
| this.container.registerInstance('Service',this.service1) | |
| this.container.registerInstance(Service,this.service2); | |
| } | |
| attached() { | |
| this.ready = 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
| import { | |
| customElement, | |
| inlineView, | |
| bindable, | |
| inject, | |
| Container | |
| } from 'aurelia-framework'; | |
| import {Service} from './service'; | |
| @customElement("elem2") | |
| @inlineView("<template><span>Elem2 Service Names: ${service1.name} ${service2.name}</span></template>") | |
| @inject('Service', Service) | |
| export class Elem2 { | |
| constructor(service1, service2) { | |
| this.service1 = service1; | |
| this.service2 = service2; | |
| } | |
| } |
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 aurelia-app> | |
| <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> | |
| </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
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging(); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
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 Service { | |
| name; | |
| constructor(name) { | |
| this.name = name; | |
| console.log('Created Service with Name' + name) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment