Chapter 4. Aurelia templating and data binding
This chapter covers
- Exploring Aurelia templating
- Understanding the Aurelia data-binding system
- Handling DOM events
The best UIs are intuitive; they make it obvious what the user can and can’t do at any given point. One example of this is the clipboard feature in Microsoft Word: it’s not possible to click the Cut or Copy buttons until you’ve selected the target text. This is made obvious by adding a grey hue to these buttons until the option is available.
User interface tweaks like these simplify the UX by guiding users through processes and minimizing decision making. An alternative approach would be to show an error or warning message when the user clicks the Copy button without having any text selected, which I’d argue is a much more invasive way of achieving the same result. One of the beautiful things about SPAs is how easy they make it to add these kinds of UI interactions. In this chapter, you’ll learn how to use a combination of template conditionals, repeaters, and binding commands to build these kinds of interactions into your Aurelia applications.
Template conditionals allow you to conditionally show or hide a fragment of the DOM based on an expression or view-model property. This allows you to design UIs that only show the user what they need at a given point in time. In this section, we’ll look at Aurelia’s template conditionals: show.bind and if.bind.