As a long-term user of the InputMask plugin, I’ve long put up with its downsides such as issues around negative amounts and decimals. Recently, I was tasked with integrating Autonumeric into an Aurelia application at work and the result was simple and elegant, I thought I would share it. The result works out a lot nicer than InputMask which I personally find to be an absolute nightmare to work with for currency scenarios especially.
Today we are going to be creating a Webpack based Aurelia application from scratch. We will be leveraging the newly released Webpack capabilities for this tutorial. Until such time that the Aurelia CLI allows us to build customisable Webpack builds from scratch, we will be doing it manually. A great opportunity to familiarise yourself with how Aurelia and Webpack work without relying on tools and skeletons. Once you have your prerequisites, getting an application ready to build off of takes about 5 minutes. Not too shabby considering we’re doing everything manually and from scratch, right?
One of my favourite features of Aurelia is the ability to bind element styles. If you ever worked with Angular 1, then you would know you could bind not only classes but inline styles on an element as well. Please note: In all of these examples except String Interpolation, you can use the style attribute, but it is recommended that you use css for Internet Explorer compatibility if you want to use interpolation. I personally just use css for all style binding use-cases, which is an alias for style anyway.
When it comes to using a plain old event listener in your Aurelia applications, if you are not aware of how classes work and how things get transpiled, then you will most likely run into some issues working with events and scope. First you might try something like the following: export MyClass { attached() { document.addEventListener('click', this.handleBodyClick); } detached() { document.removeEventListener('click', this.handleBodyClick); } handleBodyClick(e) { console.log(e.target); } } On the surface everything looks fine, it should work right? Sorry, but this will not work. Many first timers implementing event listeners into their apps will run into this, heck I even ran into it once as well.
The Event Aggregator is one of my favourite things about Aurelia and it is not even anything unique to Aurelia. There does not seem to be much info out there about it, probably due to its simplicity. But I have noticed people ask about it in the Gitter chat from time-to-time. At its core the Event Aggregator is a pub/sub layer for publishing and listening to actions that take place inside of your application loosely.
When it comes to adding in on-page functionality in the form of custom selects, autocomplete fields and more, jQuery UI is still an undisputed popular choice amongst some developers and using it within Aurelia is super simple. Because Aurelia does not replace your HTML or parse it any differently than your browser does without Aurelia, it allows you to use any third party library or plugin inside of your Aurelia application without worrying about it messing with anything.
While the default Aurelia convention of a view model looks for a matching HTML file in the same directory is what you want a lot of the time, sometimes you might want to load views from a centralised location like a views directory or ask the server to render you some HTML. In an application recently some components which have a bit of user-focused data in them populated by the server had to be implemented. I could have duplicated them, but it seemed to be a waste of code when I could render the Razor partials in my Aurelia application instead.
When it comes to progressively enhancing an application we already have enhance API which allows us to progressively enhance a page on first load, but what about enhancing a page with dynamically added elements after everything has loaded? Perhaps your application dynamically inserts HTML into your page. If you have experience working with AngularJS, you might be familiar with the ability to dynamically compile HTML using $compile which works for dynamically inserted HTML and other things that occur after the initial bootstrapping phase is done.
So you’ve run into a wall or perhaps just curious on how to expand your observer-fu? Today we are going to be learning how to observe Arrays and Objects in Aurelia. Many of the concepts you will learn here can be used to use Aurelia components outside of Aurelia, once you understand the rules you can use them to your advantage. Why you won’t see @observable here In another post here I talk about the @observable decorator and how you can use it, but you won’t see it being used here.
When it comes to building a web application, nothing causes more confusion than working out how to structure it (besides what to name things, of course). In the beginning, it is easy enough to just throw all of your code into the root of the src directory without a care in the world. But as the complexity of your application grows and subsequently its size, this approach fails. I have been working on a large-scale Aurelia application for about 6 months now and have a structure that has allowed me to move quickly without worrying about clutter or where to put everything.