Welcome to Part 8 of this series reviewing the Pluralsight course Aurelia Fundamentals by Brian Noyes.

Brian is CTO and Architect at Solliance, an expert technology solutions development company.

Brian is a Microsoft Regional Director and MVP, and specializes in rich client technologies including XAML and HTML 5, as well as building the services that back them with WCF and ASP.NET Web API.

You can follow Brian through his blog at http://briannoyes.net

Also in this series:

Part 1 – Aurelia Prerequisites

Part 2 – Getting Started

Part 3 – Implementing MVVM

Part4 – Using Depending Injection

Part 5 – Routing Fundamentals

Part 6 – Routing Beyond the Basics

Part 7 – Data Binding Fundamentals

Aurelia Data Binding Beyond the Basics

Aurelia first detects Data Binding expressions within the markup.

Then turns it them into something that it can use to dynamically drive the values of the DOM elements.

There is a parsing process where it looks for Binding Expressions.

The parsing process forms an Abstract Syntax Tree.

The execution is done via an asynchronous TaskQueue, the DOM updates are done one at a time, obtaining the source values and setting the element target values.

Specialized Bindings

Brian discusses the following:

• if.bind
• show.bind
• ref

Next he explains the more advanced capabilities of repeat.for:

• Bind to Map collections
• Looping context values:
• $index
• $first
• $last
• $even
• $odd
• $parent

Using if, show, and ref Bindings

if is a custom attribute in Aurelia, and if.bind removes the element from the DOM when it’s value evaluates to false.

For example any element with if.bind=”router.isNavigating” shows only while Aurelia is navigating to a new view.

show.bind is very similar. The difference is instead of removing the element when the value is false, a CSS hide class gets added to it.

We can put a ref attribute on an element e.g. ref=’Input1′

We can then use the string interpolation: $[input1.value]

Using Advanced repeat.for Capabilities

In this lesson we see:

• repeat.for='[key, value] of mapCollection’
• All of the looping context values shown above, used inside repeat.for=’event of events’
• Luke, I am your father

Specialized Bindings: Style and CSS Bindings

• style.bind=”styleString” – bind to string
• style.bind=”styleObject” – bind to object
• style interpolations won’t work in Internet Explorer
• CSS interpolations work in all browsers

Specialized Input Bindings: Select, Radio and Checkbox

Select elements have two bindings contexts:

1. Collection for options
2. Selected option

We can setup the select element by binding to a collection of strings, or a collection of objects.