Modifier characters

Bind key modifier characters 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 as the first character of the bind key will have the effect of toggling a token's presence, such as in the element's classList.

The "token" in this case is represented by a DOMTokenList object in the underlying DOM implementation, and represents a set of space-separated tokens. Such a set is returned by Element.classList or HTMLLinkElement.relList, and many others. See DOMTokenList on MDN for more information.

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.

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.

PHP:

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

Output HTML:

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

Space-separated token modifier

The name of the class you wish to toggle can be added to the HTML, using a space to separate it from the bind key.

HTML:

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

This image element will add the deleted token to the class attribute if the deletedAt bind key is not falsey.

PHP:

function example(DocumentBinder $binder, DateTime|null $dateOfDeletion):void {
	$binder->bindKeyValue("deletedAt", $dateOfDeletion);
}

Output HTML:

<img class="sidebar deleted" src="/cat.jpg" alt="My cat" />

or if the $dateOfDeletion variable is null:

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

Attribute modifier @

// TODO.

Boolean modifier ?

// TODO.

Inverse boolean modifier ?!

// TODO.

Boolean value modifier =

// TODO.