Back to Core

Attribute Plugins

Source

Primarily used to help hook up the store and the DOM.

Attributes Plugins

Bind

<div data-bind-disabled="$iShouldBeDisabled"></div>

Allows any valid attribute to be bound to an expression. This is useful for making elements reactive. Also can be used as a fallback for any attribute that is not supported by a plugin currently.

Model

<input data-model="foo" />

Sets up two-way data-binding on an element.

Note: Always binds to a signal and therefore should exclude the $ prefix from the signal name. Only allowed on input,textarea, select, checkbox and radio elements.

Text

<div data-text="$foo"></div>

Sets the text content of an element to the value of the signal. This is useful for setting the text content of an element to a signal value. Can use any expression that is valid in the system. For example, data-text="$foo + 'bar'" would set the text content to the value of $foo plus the string bar.

On

<button data-on-click="$$fn('foo','bar',1234)">Click Me</button>

Sets up an event listener on an element. The event listener will trigger the action specified in the expression. The expression can be any valid expression in the system. For example, data-on-click="$$fn('foo','bar',1234)" would trigger the action fn with the arguments 'foo','bar',1234 when the button is clicked.

If any signal in the expression changes, the event listener will be updated to reflect the new value of the signal automatically.

Note: the data-on-* matches DOM events, however there is a special case for data-on-load which is triggered when the element is loaded into the DOM.

Modifiers

  • .once - Only trigger the event once
  • .passive - Do not call preventDefault on the event
  • .capture - Use a capture event listener
  • .debounce - Debounce the event listener
    • _1000ms - Debounce for 1000ms
    • _1s - Debounce for 1s
    • _leading - Debounce with leading edge
    • _noTrail - Debounce without trailing edge
  • .throttle - Throttle the event listener
    • _1000ms - Throttle for 1000ms
    • _1s - Throttle for 1s
    • _noLead - Throttle without leading edge
    • _noTrail - Throttle without trailing edge
Next Backend