Attribute binding

Standard binding

Consider the following expression.

<button title.attr="title">Undo</button>

Binding to “.attr” means that you’re binding to an attribute rather than a property. This type of binding is unidirectional. Altering the attribute through typical methods won’t update the data context. To simultaneously update the attribute and the binding context, modify the property within the context, which will then auto-update the attribute.

When working with a view model or a bindable element that serves as your binding context, you can straightforwardly employ the setProperty method on that context.

this.setProperty("title", "Hello World")

If you want to affect it from the outside, you will need to know the binding context id and then you can the setProperty method on the data store., "title", "Hello World")

Conditional binding

You can set attributes based on a conditional expression.
There are two types of conditions.

  • if – data-value.if=”…”
  • case –”…”

The value of the attribute is the crux of the matter.

if example

<div data-value.if="age < 20 ? 'young'"></div>
<div data-value.if="age < 20 ? 'young' : 'old'"></div>

It’s crucial to understand that we’re leveraging the ternary syntax of JavaScript in these expressions. There are primarily two examples showcased above.

For the second example, there will always be a determined value. This is attributed to the presence of an ‘else’ definition. Interpreting the expression in simple English, it would translate to: “If the age surpasses 20, then the attribute’s value will be ‘young’; otherwise, it will be ‘old’.”

The first example is more nuanced because it solely presents an ‘if’ condition. In such scenarios, if the condition is met, the attribute value gets assigned. Conversely, if the condition isn’t satisfied, the attribute gets omitted.

In certain instances, you might wish to toggle attributes based on specific conditions. Consider the ‘disabled’ attribute as an illustration. As attributes should inherently possess values, the customary approach is to equate the attribute’s value with its name.

<input disabled="disabled" />

This is how you would set the above attribute using JavaScript.

if (age > 20) {
  document.querySelector("input").setAttribute("disabled", "disabled")

Utilizing markup offers a more streamlined approach compared to writing extensive code to observe property changes, conduct conditional evaluations, and then either update or remove the value based on the outcome. It simplifies the process and enhances code readability.

<input disabled.if="age > 20 ? "disabled" />

case example

<div"age < 20: 'young', age < 30: 'mid', default: 'old'"></div>

Within this structure:

  • If the age is less than 20, the result will be ‘young’.
  • If the age is between 20 and 30 (exclusive), the result will be ‘mid’.
  • For all other cases, the result will default to ‘old’.

You can include numerous expressions within this attribute, ensuring they are separated by commas. This provides a concise way to handle multiple conditional checks directly within the markup.

If you omit the default within the structure, and none of the given expressions evaluate to true, the attribute won’t have any assigned value. Consequently, it will be removed from the element. This behavior provides flexibility, allowing developers to define attributes only when certain conditions are met and ensuring no redundant or unnecessary attributes are present when conditions are unmet.

Toggling attributes

You can toggle attributes swapping between true and false or adding and removing the attribute.

<button click.attr.toggle="[this](aria-expanded='true')">Toggle Expanded</button>
<button click.attr.toggle="[this](data-hidden)">Toggle Hidden</button>

There are two examples there.

The first (aria-expanded) defines that we are going to be setting the attribute value to true or false. When you click on this button and no aria-expanded attribute exists it will start by setting it to true as defined in the statement. From then on it will toggle between true and false.

The second only defines the attribute name and thus it will add or remove the attribute as required.