When it comes to a modern web application, there is a high chance you will be working with a form or three. Fortunately Aurelia gives us straightforward and flexible ways of working with form elements and data.
Below are some common scenarios in which you might find yourself working with forms in Aurelia. All relatively straightforward, using concepts you are probably already familiar with from other frameworks like Angular.
Checkboxes I have seen a little bit of confusion when it comes to working with checkbox elements in Aurelia. Once you understand what each role the binding behaviours play, you realise it is all quite straight forward.
So you’ve decided it’s time to join the future and port your existing Angular application to Aurelia. Your first port of call was probably the documentation and chances are you probably got confused, because Aurelia lacks the concept of a “directive” – don’t be discouraged my friend, there is light at the end of the tunnel.
The concept of directives do exist in Aurelia, however they go by the names: Custom Attribute and Custom Element. In Angular 1.x, a directive can both be a custom attribute and a custom element. It is a confusing concept that fortunately has been removed in Angular 2.
Today we are going to be discussing how to use the Sortable Javascript library by RubaXa in our Aurelia applications.
Sortable is a highly configurable, no frills drag and drop library that has zero dependencies. So if you’re not using jQuery or just not a fan of libraries with dependencies, then this is the library for you. I also highly recommend Dragula but this article will be focusing on Sortable.
Getting Started This article is going to assume you have an Aurelia application already up and running and using JSPM as your package manager. If you do not have Aurelia installed, the recommended and easiest way to get an Aurelia application up and running is to download the Skeleton Navigation application from Github here.
In Aurelia we already have the power to iterate arrays from within our views and for most purposes, this is fine. However, sometimes there are situations where we might want to iterate an object’s properties or values without needing to normalise it into an array.
In the Aurelia Gitter chat, this question came up, so I decided to create a couple of custom ValueConverters to help with iterating Objects like they were arrays. Other than including the Value Converters themselves, you don’t need to change anything else.
Before Aurelia came onto the scene I had worked extensively with Angular and then shortly thereafter, React.js (sometimes both together). After using React for a while, I became accustomed to passing functions as callbacks to my components. So naturally when I started using Aurelia and creating custom elements, I tried the callback function approach first.
Callbacks are not the answer While I was successful in creating a bindable property on my initial custom elements and then passing a function, it became apparent this approach is flawed. Not only do you have scope issues to deal with, but I encountered issues with singletons not being singletons and struggling to pass exact references.
I know, I just can’t keep quiet about Aurelia. But it is one of the most exciting things to happen to Javascript in a long time. So I decided to write up a quick tutorial on creating a custom element in Aurelia for Select 2, which is a popular library for adding custom select elements to your applications.
Prep Before we begin, you need to have Aurelia installed locally and the development server running. The easiest way to do this is to download the Aurelia Skeleton Navigation project and follow the README instructions. This tutorial assumes you already have an Aurelia project and that you’re not starting from scratch.
I am rather smitten with Aurelia but it’s hard to deny the popularity of React. To avoid a situation where it’s React or nothing, to get the best of both worlds, we can use React inside of Aurelia.
In Angular, we would have done this using a custom directive. In Aurelia, we are going to be doing the same, but instead, we will be creating a custom element which achieves the same thing as an Angular directive, albeit in a more clean ESNext and Aurelia-like way.