Templates Overview & Quick Reference

Welcome to the Aurelia templating documentation! This guide covers everything you need to build dynamic, interactive UIs with Aurelia's powerful templating system.

Quick Start

New to Aurelia templates? Start here:

1. Cheat Sheet - Quick syntax reference for all template features

2. Template Syntax Overview - Core concepts and features

3. Real-World Recipes - Complete working examples

How Do I...?

Find what you need quickly with this task-based guide:

Display Data

• Show dynamic text? → Text Interpolation - Use ${property}

• Bind to element properties? → Attribute Binding - Use .bind, .one-way, .two-way

• Format data for display? → Value Converters - Use ${value | converter}

• Show/hide elements? → Conditional Rendering - Use if.bind or show.bind

Work with Lists

• Loop through an array? → List Rendering - Use repeat.for="item of items"

• Get the current index? → List Rendering: Contextual Properties - Use $index, $first, $last

• Handle empty lists? → Conditional Rendering - Combine if.bind="items.length === 0" with else

• Optimize large lists? → List Rendering: Performance - Use key.bind or key:

Handle User Input

• Capture button clicks? → Event Binding - Use click.trigger="method()"

• Handle keyboard input? → Event Binding: Keyboard Events - Use keydown.trigger:enter="submit()"

• Create two-way form bindings? → Forms - Use value.bind="property"

• Prevent default behavior? → Event Binding: Modifiers - Use click.trigger:prevent="method()"

• Debounce rapid input? → Event Binding: Binding Behaviors - Use input.trigger="search() & debounce:300"

Conditional Logic

• Show content based on a condition? → Conditional Rendering: if.bind

• Toggle visibility frequently? → Conditional Rendering: show.bind

• Handle multiple conditions? → Conditional Rendering: switch.bind

• Show if/else branches? → Conditional Rendering: else - Use else after if.bind

Styling

• Apply dynamic CSS classes? → Class & Style Binding

• Bind inline styles? → Class & Style Binding

• Toggle classes conditionally? → Class & Style Binding

Components

• Use a component in my template? → Component Basics: Importing - Use <import from="./my-component"></import>

• Make a component available globally? → Component Basics: Global Registration

• Pass data to a component? → Bindable Properties - Use @bindable and bind in parent

• Get a reference to an element? → Template References - Use ref="elementName"

• Slot content into a component? → Slotted Content

Forms

• Build a form? → Forms: Basic Inputs

• Validate form input? → Validation Plugin

• Handle form submission? → Forms: Submission

• Work with checkboxes? → Forms: Collections

• Handle file uploads? → Forms: File Uploads

Advanced

• Create reusable template behaviors? → Custom Attributes

• Transform data in templates? → Value Converters

• Control binding behavior? → Binding Behaviors

• Work with promises? → Template Promises - Use promise.bind

• Create local template variables? → Template Variables - Use <let>

• Work with SVG? → SVG

• Use lambda expressions? → Lambda Expressions

Documentation Structure

Core Concepts

• Template Syntax Overview - Start here for the big picture

• Cheat Sheet - Quick reference for all syntax

Template Syntax

• Text Interpolation - Display data with ${}

• Attribute Binding - Bind to element properties and attributes

• Event Binding - Handle user interactions

• Template References - Access DOM elements with ref

• Template Variables - Create local variables with <let>

• Template Promises - Handle async data with promise.bind

• Globals - Built-in global functions and values

Display Logic

• Conditional Rendering - Show/hide content with if, show, switch

• List Rendering - Loop over data with repeat.for

• Class & Style Bindings - Dynamic CSS

Data Transformation

• Value Converters - Format and transform data (like pipes)

• Binding Behaviors - Control binding flow (debounce, throttle, etc.)

Forms & Input

• Forms Overview - Working with form inputs

• Form Collections - Checkboxes, radios, multi-select

• Form Submission - Submit forms and handle user feedback

• File Uploads - Handle file inputs and uploads

• Validation Plugin - Validate user input

Extensibility

• Custom Attributes - Create reusable template behaviors

• Advanced Custom Attributes - Complex attribute patterns

Other Features

• Lambda Expressions - Arrow functions in templates

• Local Templates - Inline component definitions

• SVG - Working with SVG elements

Real-World Examples

• Recipes - Complete, production-ready examples

  • Product Catalog - Search, filter, sort

  • Shopping Cart - Add/remove items, calculate totals

  • More coming soon—follow the contribution guide in the recipes index to share yours!

Learning Path

Not sure where to start? Follow this path:

Beginner

1. Read Template Syntax Overview

2. Learn Text Interpolation and Attribute Binding

3. Try Event Binding for interactivity

4. Practice with Product Catalog Recipe

Intermediate

1. Master Conditional Rendering (if, show, switch)

2. Learn List Rendering (repeat.for)

3. Explore Value Converters for data formatting

4. Build forms with Forms Guide

5. Try Shopping Cart Recipe

Advanced

1. Create Custom Attributes

2. Use Binding Behaviors for fine control

3. Work with Template Promises

4. Explore Advanced Custom Attributes

5. Adapt real-world patterns from the Template Recipes collection

Performance Tips

• Use .one-way binding for display-only data

• Add key to repeat.for for dynamic lists

• Use show.bind for frequent visibility toggles

• Use if.bind for infrequent changes

• Debounce rapid input events

• Keep expressions simple - move logic to view model

Common Pitfalls

• Components not appearing? → Don't forget <import from="./component"></import> (or register globally)

• Array changes not detected? → Use array methods like push(), splice(), not direct index assignment

• Form input not updating? → Use .bind or .two-way, not .one-way

• Performance issues with large lists? → Add key.bind or key: to repeat.for

• Bindings not working? → Check for typos in property names and binding commands

Need Help?

• Check the Cheat Sheet for quick syntax reference

• Browse Recipes for complete examples

• Review Template Syntax Overview for core concepts

• Search the "How Do I...?" section above

• Visit Aurelia Discourse for community support

• Check GitHub Issues for known issues

Related Documentation

• Components - Build reusable UI components

• Essentials - Core Aurelia concepts

• Router - Navigation and routing

• Dependency Injection - Share services between components