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
Part4 – Using Depending Injection
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.
Brian discusses the following:
Next he explains the more advanced capabilities of repeat.for:
- Bind to Map collections
- Looping context values:
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:
- Collection for options
- Selected option
We can setup the select element by binding to a collection of strings, or a collection of objects.