Skip to content

Instantly share code, notes, and snippets.

@3cp

3cp/index.html

Created April 26, 2022 14:15
Show Gist options
  • Save 3cp/ac71a58a811845eef68ad4343f608a35 to your computer and use it in GitHub Desktop.
Save 3cp/ac71a58a811845eef68ad4343f608a35 to your computer and use it in GitHub Desktop.
Download ZIP
au2_getter_test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.js.
-->
<body>
<my-app></my-app>
<script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>
Raw
package.json
{
"dependencies": {
"aurelia": "latest"
}
}
Raw
src\main.js
import Aurelia from 'aurelia';
import { MyApp } from './my-app';
Aurelia.app(MyApp).start();
Raw
src\my-app.html
<button click.trigger="toggle()">${ isProcessing ? 'Stop' : 'Start' }</button>
<p>${ summary }</p>
Raw
src\my-app.js
export class MyApp {
isProcessing = false;
task = undefined;
toggle() {
if (this.isProcessing) {
this.isProcessing = false;
this.task = undefined;
} else {
this.isProcessing = true;
// au2 calls the summary getter between these
// two lines, which will surprise user with
// an undefined object error.
this.task = { name: 'Some Task' };
}
}
get summary() {
if (this.isProcessing) {
return `Processing task: ${this.task.name}`;
}
return '';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment