I have been asked this question a few times and it can be hard to see things from the perspective of a newcomer to Aurelia, given how long I have been working with it. What is obvious to me is not obvious to everyone else. When you’re deciding to build an Aurelia application, you’ll discover …
Javascript
Working With Linked Node Modules & Webpack In Aurelia
When you are building an Aurelia plugin and you want to test it, you will want to use npm link or yarn link to create a local symbolic link to your module and then use it in a test application. If you are working with Aurelia and Webpack, then you’ve probably run into an issue …
Computed Object Keys and Function Names In Javascript
For years, I wanted the ability to use variables as object keys in Javascript. Thanks to ES2015, we got the ability to have computed object keys from within the object definition itself. This isn’t a new or cutting-edge addition, we’ve had it in Javascript for a while now and it is well-supported. The reason for …
If/else In Aurelia Using The “else” Attribute
Did you know Aurelia introduced an else attribute a while ago which allows you to do if/else statements in your views complete with support for animation? If you have been working with Aurelia for more than a few months, then you probably have been working with if/else statements by using multiple if.bind attributes in your …
How To Convert FormData To JSON Object
Recently, whilst working on a project I needed to take HTML FormData and then convert it to JSON to be sent off to an API. By default the FormData object does not work in the way you would want it to for JSON. Using the for..of syntax introduced in ECMAScript 2015, we can access the …
Webpack Support Lands In Aurelia CLI
I have been waiting for this day to come for a long time now: the Aurelia CLI now supports scaffolding Webpack applications from scratch. My biggest gripe with the skeletons the Aurelia team provide is they have a lot of stuff in them I have to remove for every new project. Admittedly, the skeletons serve …
Checking If a View Slot Is Defined In Aurelia
Aurelia supports the <slot> element provided via the HTML Web Components specification, which allows you to define placeholders in your HTML that can be replaced. A lot of examples around seem to wrap a slot with a DIV, perhaps a class. The issue with this approach is if you have a styled DIV wrapping a …
Get Root $index Value From Within Nested Aurelia Repeaters
Recently in an Aurelia project, I was working with nested repeaters (3 levels deep). The problem was I needed to get the $index from the top level repeater (so, level one). Instinctively, I presumed that you could do this: $parent.$parent.$parent.$index This does not work. The $parent variable only extends to the parent and cannot be …
Aurelia Routing + Switching Root Using setRoot
In your Aurelia applications, you might have two or more roots defining different entry points into your application. I personally create a public facing root which has public routes and an auth protected shell which has routes for logged in users only. Let’s say for this example you have two roots: publicRoot and privateRoot. Your …
Module ES2015 and TypeScript 2.4 Dynamic Imports
Introduced in TypeScript 2.4 is support for the ECMAScript dynamic imports feature. If you didn’t see the announcement or read it properly, you’re probably here because you’re getting the following error. In my case I use Webpack and I was trying to add in some dynamic import goodness and getting this error: Dynamic import cannot …
