A collection for Aurelia / typescript / javascript as and when I encounter them.
For a post on getting set up with Aurelia JS see this post:
https://www.technical-recipes.com/2019/getting-started-with-aurelia-js/
https://www.technical-recipes.com/2019/getting-started-with-aurelia-js-part-2/
1. Hello World!
app.js
export class App {
constructor() {
this.myData = 'Welcome to Aurelia app!';
}
}
app.html
<template>
<h3>${myData}</h3>
</template>
Giving the following output:
Hello World!
2. Detecting mouse movement events
From here: https://bl.ocks.org/Vheissu/db72c2d41709697134654d5287913c0c
app.html
<template>
<div mousemove.delegate="mousemove($event)" style="background: teal; border: 2px dotted #333; color: #FFF; font-size: 16px; font-weight: bold; height: 250px; width:500px;">Move mouse in here...</div>
<ul if.bind="mouseevents">
<li repeat.for="mouseevent of mouseevents">x: ${mouseevent.x} y: ${mouseevent.y}</li>
</ul>
</template>
app.js
export class App {
constructor() {
this.mouseevents = [];
}
mousemove(e) {
this.mouseevents.push({x: e.clientX, y: e.clientY});
}
}
Giving the following output:
Detecting mouse event in Aurelia
3. Two-way data binding
In this example we have our view-model and view linked. Firstly the text is set in the constructor. Then whenever we enter some text inside the input field, the view will be updated.
app.js
export class App {
constructor() {
this.myData = 'Enter some text!';
}
}
app.html
<template>
<input id = "name" type = "text" value.bind = "myData" />
<h3>${myData}</h3>
</template>
Giving the following output:
Two-way binding
4. Displaying a list of controls using repeat.for
Firstly an excellent page at ‘I Like Kill Nerds’ blog which gives lots of useful examples:
https://ilikekillnerds.com/2015/10/working-with-the-repeater-in-aurelia/
A more basic get-you-started example here:
app.html
<template>
<div repeat.for="message of messages">
<strong>Message: </strong>${message}
</div>
</template>
app.js
export class App {
messages = ["ABC", "DEF", "123", "XYZ"];
}
Giving the following output:
