Skip to content

ref:*

Just like on:* is the output channel for event actions, so too is the ref:* attribute the output channel for reference actions.

Reference actions can be defined on any element with the following pattern:

ref:<attributeName>="hello KEML"

This reads like the following:

  • define hello and KEML as actions of type reference
  • make them point to the live value of the <attributeName> attribute on the current element

ref:<name> creates a reference to the attribute named <name>. Once a reference exists, you can link to it.

Whenever you are using ref:width or ref:height, you can optionally specify an additional measure attribute (see the graph example) with one of the following values:

Bound by value

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<p>The references are instant and unbreakable. So, if you tried to make them
  bi-directional here, neither element would be able to be edited, since it
  would always be forced to exactly match the value of another.</p>

<p>Type in the first field and watch the second update immediately.</p>

<input
  type="text"
  class="input"
  ref:value="isThisTheSameInput"
>

<input
  type="text"
  class="input mt3"
  link:value="isThisTheSameInput"
>

The references are instant and unbreakable. So, if you tried to make them bi-directional here, neither element would be able to be edited, since it would always be forced to exactly match the value of another.

Type in the first field and watch the second update immediately.