Welcome to Part 7 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

Aurelia Data Binding Fundamentals

Data Binding Overview

The elements that we render on a page have attributes on them, and each attribute has a value.

We often need to set these based on data objects. Manually writing the push/pull logic can be repetitive and time consuming.

Data binding instead uses a declarative syntax. Brian explains that is enables loose coupling, and gives us automatic data flow as the data changes.

Data binding is a key enabler of MVVM. Data binding is the mechanism through which we can have loosely coupled but cohesive bonds between our View and our ViewModel.

Aurelia Data Binding Overview

Aurelia Data Binding:

• Adaptive Data Binding
• Performance Optimized
• Easy to use with simple syntax
• Flexible
• Extensible

Aurelia’s Adaptive Data Binding System

Aurelia supports one way and two way data binding, and also binding between elements i.e. ensuring a second element is updated at virtually the same time as a first one.

There are also one time bindings that happen only on initial load.

In this lesson Brian discusses many other features of the data binding system including:

• Built in adapters for input element type
• Checks for ObserverLocators for property
• Plain old JavaScript properties
• Computed properties
• Dirty checking fallback mechanism
• Binding to arrays

Primary Data  Binding Syntax

Brian describes the syntax works for > 90% of cases:

• property.bind
• string interpolation e.g. ${filename}
• looping over arrays with repeat.for

A Walk Through the Data Binding so Far

We start with a look at repeat.for, string interpolation, href.bind and if.bind in our shell.html.

Next Brian shows us similar databinding in events.html, eventsList.html and eventDetail.html.

Binding with innerHTML and textContent

Brian removes some old code for cleanup purposes, and then adds additional bindings.

The first new example is textContent.bind which lets us set any plain text that we want, and then we see innerHTML.bind and the value that we bind here can contain markup tags.

We must be aware that binding to innerHTML creates a possible Cross Site Scripting risk. Aurelia comes with a lightweight sanitizeHTML converter to somewhat mitigate this risk.

For a more robust defense against XSS take a look at P’unk Avenue’s sanitize-html routine. I recommend either doing your own thorough security analysis or consulting a qualified security consultant.

Data Binding Modes

• .two-way
• .one-way
• .one-time

Controlling Data Flow with Data Binding Modes

A demonstration of the above Data Binding modes, beginning with textContent.two-way.

We see that the adaptive data binding system is smart enough to auto-magically figure out it needs two-way data-binding just with the use of the standard .bind syntax.

Event Binding Overview

• event.delegate – wires up event handler at the document level
• event.trigger – wires up event handler on the element itself

The net effect of these two mechanisms is virtually the same, but event.trigger can consumes a bit more memory if many elements are wired up.

There’s also a couple of other options:

• attribute.call – pass function pointer to attribute for later invocation
• $event – pass event argument to the target method

Event Bindings in Action

Demos of the above mechanisms, beginning with click.trigger.

We see that we get the same result with click.delegate and click.call

Part 8 – Data Binding Beyond the Basics is coming soon