Modifier characters

Bind key modifiers are special characters that you can add to an element's bind key to add special behaviour.

An example of what this may look like is <button name="do" value="delete" data-bind:disabled="?!isActive">Delete</button>, and <img src="/photo.jpg" data-bind:class=":size" />.

Token modifier :

Adding a colon to the bind key will have the effect of toggling a token, such as in the element's classList.

It's very common in web user interfaces to want to add or remove a string token to the class attribute. Using the DOM, this can be achieved by doing $element->classList->add("selected");, for example.

With the following example HTML:

<img src="/cat.jpg" alt="My cat" data-bind:class=":imageCategory" />

This image element will add a token to the class attribute according to the value of imageCategory.

With the following PHP:

function example(DocumentBinder $binder):void {
	$binder->bindKeyValue("imageCategory", "cat-photo");
}

The output HTML will look like this:

<img src="/cat.jpg" alt="My cat" class="cat-photo" />

Attribute modifier @

Boolean modifier ?

Inverse boolean modifier ?!

Boolean value modifier =