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.

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" />

Space-separated token modifier

// TODO.

Attribute modifier @

// TODO.

Boolean modifier ?

// TODO.

Inverse boolean modifier ?!

// TODO.

Boolean value modifier =

// TODO.