Aurelia Custom Attributes Part 2

In the first part of the Aurelia custom attributes series, we discussed what custom attributes are and their characteristics. In this section, we will talk about the three supported types of binding of Aurelia custom attributes.

Aurelia custom attributes have three supported types of binding – single value, options, and dynamic options binding. First, let’s talk about single value binding.

Single Value binding automatically sets the value property of Aurelia’s attribute view-model. But note that if the databinding is not complete, the property is yet to be set. Meaning the value property is only available in the bind section and later lifecycle events.

aurelia custom attributes

aurelia custom attributes

The code sample will not change the color of the square even if the bound value is changed. This is caused by the attribute not notified when the value property was changed. To do this, we can use Aurelia’s callback function valueChanged(newValue, oldValue). This function is called whenever the attribute’s value is changed when implemented in the view-model. It has two parameters that is newValue and oldValue. From the name itself, these parameters are set to contain the new and old attributes.

aurelia custom attributes

When the value of color property is entered in the text box, valueChanged method is called, thus alerting Aurelia’s custom attribute that there’s a change.

Options binding uses the bindable decorator to give Aurelia custom attributes the ability to have multiple bindable properties. This attribute also has an optional callback function ${propertyName}Changed(newValue, oldValue) for every bindable property.

aurelia custom attributes

Separate each bound option with a semicolon and insert the binding command or value as shown above. Also take note that bindable properties are to be dash-cased when used in DOM and kept in the original form when in view-model.

Dynamic Options works exactly the same as binding an options attribute but designed to deal with bindable properties even if the attribute is still created and the name is yet to be known. This option is used with the dynamicOptions decorator and also has a callback function propertyChanged(name, newValue, oldValue) that is to be implemented.

aurelia custom attributes

On the next section, we will tackle Aurelia Custom Elements.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.