Trillo Docs
  • Info
  • Quick Start
  • Concepts
    • Overview
    • Reactivity
    • Indexability
    • Reusability
    • Kits
  • Reference
    • CLI
    • Language
    • Markup
    • Preprocessor
    • Runtime
    • Server
    • Stdlib
Powered by GitBook
On this page
  • Special values
  • aka
  • hidden
  • data
  • dataOffset
  • dataLength
  • nestFor
  • nestIn
  • Special prefixes
  • attr
  • on
  • handle
  • class
  • style
  • did
  • will
  • Implementation values
  • __id
  • __dom
  • __scope
  • __outer
  • __elementIndex
  • __isLastElement
  • __mixColors
  • __regexMap
  1. Reference

Runtime

PreviousPreprocessorNextServer

Last updated 1 year ago

Trillo's runtime reserves special treatment to the following .

Special values

These are declared in HTML as any other logic value, e.g. <div :hidden="[[false]]">, but they have a special meaning.

aka

TBD

hidden

TBD

data

TBD

dataOffset

TBD

dataLength

TBD

nestFor

TBD

nestIn

TBD

Special prefixes

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).

attr

<html lang="[['en']]">

will add a value attr_lang in the root scope.

on

These values contain event listeners for DOM events. E.g.:

<body :on-click="[[(ev) => ...]]">

:on- event listeners are not related to the legacy on... HTML attributes, and are implemented with addEventListener() behind the scenes.

handle

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.

class

These values let us add and remove class names in a scope's underlying DOM element.

TBD

style

TBD

did

TBD

will

TBD

Implementation values

TBD

__id

TBD

__dom

TBD

__scope

TBD

__outer

TBD

__elementIndex

TBD

__isLastElement

TBD

__mixColors

TBD

__regexMap

TBD

Normal HTML attribute that have an in their value are available with this prefix in tag's . E.g.:

will assign the listener function to value on_click in tag's , 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 scopes or when using .

logic values
expression
scope
scope
replicating
conditional blocks