My Aurelia cheat sheet

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 [code language="js"] export class App { constructor() { this.myData = 'Welcome to Aurelia app!'; } } [/code] app.html [code language="html"] <template> <h3>${myData}</h3> </template> [/code] Giving the following output: [caption id="attachment_9033" align="alignnone" width="630"]Hello World! Hello World![/caption] 2. Detecting mouse movement events From here: https://bl.ocks.org/Vheissu/db72c2d41709697134654d5287913c0c app.html [code language="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> [/code] app.js [code language="js"] export class App { constructor() { this.mouseevents = []; } mousemove(e) { this.mouseevents.push({x: e.clientX, y: e.clientY}); } } [/code] Giving the following output: [caption id="attachment_9028" align="alignnone" width="630"]Aurelia Detecting mouse event in Aurelia[/caption] 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 [code language="js"] export class App { constructor() { this.myData = 'Enter some text!'; } } [/code] app.html [code language="html"] <template> <input id = "name" type = "text" value.bind = "myData" /> <h3>${myData}</h3> </template> [/code] Giving the following output: [caption id="attachment_9036" align="alignnone" width="630"]Two-way binding Two-way binding[/caption] 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 [code lang="html"] <template> <div repeat.for="message of messages"> <strong>Message: </strong>${message} </div> </template> [/code] app.js [code lang="js"] export class App { messages = ["ABC", "DEF", "123", "XYZ"]; } [/code] Giving the following output:

Comments

Post a Comment

Popular posts from this blog

Using the Supervisor Controller Pattern to access View controls in MVVM

Image
As discussed on a StackOverflow post , this is considered bad practice, so only use this when necessary. Step 1: Create a new WPF project Step 2: Add event handling code A number of classes are needed for doing command bindings in MVVM. Create the following classes and add to your Visual Studio project: RelayCommand.cs [code language="csharp"] using System; using System.Windows.Input; namespace SupervisorControllingPattern { public class RelayCommand<T> : ICommand { private readonly Predicate<T> _canExecute; private readonly Action<T> _execute; public RelayCommand(Action<T> execute) : this(execute, null) { _execute = execute; } public RelayCommand(Action<T> execute, Predicate<T> canExecute) { if (execute == null) throw new ArgumentNullException(nameof(execute)); _execute = execute; _canExecute = canExecute; ...
Read more

Getting started with client-server applications in C++

Image
A demonstration of simple Internet client-server applications in C++ (Linux-based). The client application tries to connect to the remote server application using the IP address of the remote server ('localhost' or 127.0.0.1) and the server port number which defaulted to 1234. The server application listens to port number 1234 for a connection request. When the server application receives the connection request it sends the text message "Hello!\r\n" to the client.
Read more

How to send an e-mail via Google SMTP using C#

Image
First things first, some useful StackOverflow links: https://stackoverflow.com/questions/9201239/send-e-mail-via-smtp-using-c-sharp https://stackoverflow.com/questions/17462628/the-server-response-was-5-7-0-must-issue-a-starttls-command-first-i16sm1806350 To demonstrate how this is done I first create a new Visual Studio project: Some example code for sending an email via a Google email account (smtp.goolgle.com) - obviously replace this with email / credentials of your own... I put the code within a try-catch block in order to capture any errors that may occur while attempting this. [code language="csharp"] using System; using System.Net; using System.Net.Mail; namespace EmailSmtp { class Program { static void Main(string[] args) { try { // Credentials var credentials = new NetworkCredential("someEmail@gmail.com", "somePassword"); // Mail message var ...
Read more