Skip to content

Instantly share code, notes, and snippets.

@bigopon
Created March 16, 2022 05:58
Show Gist options
  • Save bigopon/f02da39bc2d04519a78f5760b6b2e05e to your computer and use it in GitHub Desktop.
Save bigopon/f02da39bc2d04519a78f5760b6b2e05e to your computer and use it in GitHub Desktop.
v1 enhance root node behavior
<!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 aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.js.
-->
<body aurelia-app="main">
<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>
{
"dependencies": {
"aurelia-bootstrapper": "latest"
}
}
<template>
<!-- Try to create a css/scss/sass/less file then require it here -->
<h1>${message}</h1>
<div ref='enhance'>
</div>
<template ref=template>
</template>
import { TemplatingEngine, inject } from 'aurelia-framework';
@inject(TemplatingEngine)
export class App {
message = 'Hello Aurelia!';
constructor(te) {
this.te = te
}
attached() {
this.enhance.setAttribute('id.bind', 'message')
this.enhance.innerHTML = '<b>${message}</b>'
this.te.enhance({
element: this.enhance,
bindingContext: { message: 'hello' }
})
this.template.innerHTML = '<div>${message}</div>'
this.te.enhance({
element: this.template.content,
bindingContext: { message: 'hello template' }
})
}
}
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging('info');
aurelia.start().then(() => aurelia.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment