In this segment, we’ll explore the concept of the “set value” expression. We’ll delve into its mechanics, understand its significance, and illustrate its application with annotated markup examples.

The “set value” expression assigns values to the subsequent targets:

1. Property within the global context
2. Property of the current binding context
3. Property of a specified element
4. Attribute of a designated element.

Values are set in response to events on an element. The specific event is inconsequential. Any dispatched event can be utilized to assign a value. While our examples showcase the click event, it could be a custom event or any conventional JavaScript event.

The key aspect to emphasize is the syntax. The initial word in the expression signifies the event to monitor. It is succeeded by “.setvalue,” signaling to the parser our intention to execute a set value action upon the event’s activation.

Setting global context property

Here are some possible scenarios to consider:

1. Direct assignment of the value.
2. Alternating a boolean value.
3. Establishing the property value through a ternary expression.

// Direct assignment
<button click.setvalue="$globals.title = 'Hello World'" />

// Alternating a boolean
<button click.setvalue="$globals.menuVisible = !$globals.menuVisible" />

// Ternary expression
<button click.setvalue="$globals.state = $globals.state == 'on' ? 'off' : 'on'" />

Setting context property

This operates in a manner identical to the global context, with the only difference being the omission of the “$globals” keyword from the expression. This action sets the property in the appropriate context for the given element. It is analogous to invoking the setProperty method on a binding context.

// Direct assignment
<button click.setvalue="value = 10" />

// Alternating a boolean
<button click.setvalue="isVisible = !isVisible" />

// Ternary expression
<button click.setvalue="state = state == 'on' ? 'off' : 'on'" />

For intricate situations, additional steps can be taken. Consider a scenario where I aim to set the binding context property. However, first, I wish to evaluate the value of a property on an element. Based on that assessment, I’ll decide the appropriate value for the context property.

<button click.setvalue="state = prop(#input1, value, true) == 1 ? 'on : 'off'" />

In simpler terms, the statement means the following: Upon clicking the button, I intend to set the “state” property of the current binding context. First, determine if the element with the ID “input1” possesses a value of 1. If it does, change the “state” to “on”; if not, change it to “off”. When locating this element, initiate the search from the document’s top level.

Let’s break down the expression “prop(#input1, value, true)” into its individual parts. To start, the term “prop” indicates that we intend to retrieve a property of an element. Alternatively, if we were to access an attribute, we would use the term “attr”.

The first parameter specifies the CSS query selector used to locate the element.

The second parameter identifies the property we intend to access.

The third parameter in our search expression determines where our search begins: setting it to true means we’ll search through the entire document from the top level using document.querySelector(...), while setting it to false limits our search to within the confines of the current binding context, using element.querySelector(...). Here, “element” refers to the current context where we’re conducting a more focused search. However, if the element you’re looking for isn’t within the current context’s branch, you’ll need to set this parameter to true to expand your search to the entire document. To put it simply, you have to decide whether to search the whole document for the first element that matches your query, or just look within the current context’s branch.

This action can also be executed without the specified condition.

<button click.setvalue="state = prop(#input2, value, true)">

Put simply, when you click this button, retrieve the value from the specified element and set it to the “state” property of the current binding context.

In the examples we’ve discussed so far, we have been assigning properties to binding contexts. However, if the binding context is not necessary, we can directly set properties and attributes on the elements themselves. The syntax for setting properties and attributes remains the same as in the previous examples; the only change is that they are now on the left side of the expression. Additionally, it is possible to read a property from one element and assign it to another directly, without using the binding context as an intermediary.

attribute to attribute
“attr(#static1, data-value, true) = attr($element, data-value, true)”

property to property
“prop(#input4, value, true) = prop($element, value)”

Any combination in between is also supported.

Consider the particular scenario in the attribute-to-attribute example. In this instance, we utilize the $element keyword, which signifies the current element acting as the binding context. Usually, this would be a BindableElement. When altering values in attribute and property expressions, particularly when toggling from true to false, it is this binding context element that serves as the starting point for the search.