Skip to content

Instantly share code, notes, and snippets.

@fkleuver

fkleuver/app.html

Created October 4, 2016 16:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fkleuver/16e2eb80c1ebe8e66bca213574f19a28 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fkleuver/16e2eb80c1ebe8e66bca213574f19a28 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist
Raw
app.html
<template>
<require from="./parent-element"></require>
<parent-element></parent-element>
</template>
Raw
app.js
export class App {
}
Raw
child-element.html
<template>
<p if.bind="isLoaded">I'm loaded!</p>
<p if.bind="!isLoaded">I'm not loaded</p>
</template>
Raw
child-element.js
import { inject } from "aurelia-framework";
@inject(Element)
export class ChildElement {
constructor (element) {
this.isLoaded = false;
this.element = element;
}
attached () {
setTimeout(() => {
this.isLoaded = true;
this.aPropertyOnlyAvailableAfterLoadingIsComplete = true;
this.element.dispatchEvent(new CustomEvent("loaded", {
bubbles: true
}));
}, 2000);
}
}
Raw
index.html
<!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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
parent-element.html
<template>
<require from="./child-element"></require>
<child-element view-model.ref="child" loaded.delegate="onChildLoaded($event)"></child-element>
</template>
Raw
parent-element.js
export class ParentElement {
attached () {
}
onChildLoaded($event) {
alert(this.child.aPropertyOnlyAvailableAfterLoadingIsComplete);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment