Trillo's runtime reserves special treatment to the following logic values.
These are declared in HTML as any other logic value, e.g. <div :hidden="[[false]]">
, but they have a special meaning.
TBD
TBD
TBD
TBD
TBD
TBD
TBD
Values using special prefixes have special meanings based on the prefix itself. We can specify them in HTML code using the prefix followed by -
(dash), and we can access them from JavaScript using the prefix followed by _
(underscore).
Normal HTML attribute that have an expression in their value are available with this prefix in tag's scope. E.g.:
<html lang="[['en']]">
will add a value attr_lang
in the root scope.
These values contain event listeners for DOM events. E.g.:
<body :on-click="[[(ev) => ...]]">
will assign the listener function to value on_click in tag's scope, and will register it with its underlying DOM element.
Using :on-
attributes for registering DOM event handlers is recommended, so scopes can be added and removed as needed, with their event listener properly registered and unregistered, when replicating scopes or when using conditional blocks.
:on-
event listeners are not related to the legacyon...
HTML attributes, and are implemented withaddEventListener()
behind the scenes.
These values contain handler expressions which are executed when and only when some other value changes. E.g.:
<body :count="[[0]]"
:mode="increment"
:handle-count="[[
console.log(count, mode);
]]">
</body>
The handler will only be executed only when count
changes (including when it's initialized). Changes of the mode value won't execute it.
This is in contrast with how reactive expressions normally work: they are re-evaluated when any of the values they reference changes.
These values let us add and remove class names in a scope's underlying DOM element.
TBD
TBD
TBD
TBD
TBD
TBD
TBD
TBD
TBD
TBD
TBD
TBD
TBD