Examples

Virtual bindings

The examples below show each virtual binding in isolation. All of them can be combined on the same element.

Property binding

The data-bind:prop.<name> binding assigns a DOM property. The button below enables itself only when the email value looks valid, by assigning its disabled property.

Attribute binding

The data-bind:attr.<name> binding writes an attribute, and removes it for false, null, or undefined results. The disclosure below drives both the aria-expanded state of its button and the hidden attribute of its panel from one value. Note the explicit String(…) on aria-expanded: ARIA states must keep their "false" value instead of removing the attribute.

Class binding

The data-bind:class.<name> binding toggles a class according to the result's boolean value. An empty expression passes the raw value through, so a checkbox's boolean value can drive classes directly.

Style binding

The data-bind:style.<name> binding writes an inline style, and clears it for false, null, or undefined results. The progress bar below computes its width from a range input. Custom properties work too, for example data-bind:style.--progress="value".

Text binding

The data-bind:text binding assigns textContent. Use an expression to format the value, or an empty attribute to render it as is.

Conditional rendering

The data-bind:if binding adds or removes the content of a <template> element based on the bound value. The shipping address field below only exists in the DOM — and in the submitted form — while the checkbox is checked. See the conditional rendering reference for the trade-offs against data-bind:attr.hidden.

The template content can hold components of its own: they mount when the content is inserted and are destroyed when it is removed. Give nested keyed bindings the immediate option so they sync with the current scoped value on insertion — the results line below renders the query that inserted it, then follows every keystroke.

Immediate propagation

In the following example, the first DataModel uses the immediate option to hydrate the scoped text key on mount. The second model mirrors the same native name, and the keyed DataBind renders their shared value.