---
# System prepended metadata

title: Template variables
tags: [brew-js]

---

---
tags: brew-js
---

# Template variables

## Methods

### `getVar`

### `setVar`

### `declareVar`

## Directives

### `var="{ key1: value1 ... }"`

| App events | DOM events | Other directives | Triggers |
| - | - | - | - |
| `mounted`, `pageenter` | - | - | - |

Explicitly declare a variable on a HTML element.
Variable of the same name will mask that in parent elements.

```htmlembedded
<div var="{ myVar: 1 }">
    <p template>myVar is {{myVar}}</p>
    <div var="{ myVar: 2 }" class="fg-color-blue">
        <p template>myVar is {{myVar}}</p>
    </div>
</div>
```
will display:

<table>
    <tr>
        <td>
            <p>myVar is 1</p>
            <div style="color: blue">
                <p>myVar is 2</p>
            </div>
        </td>
    </tr>
</table>


### `auto-var="{ key1: value1 ... }"`

| App events | DOM events | Other directives | Triggers |
| - | - | - | - |
| `mounted`, `pageenter` | - | `set-var` | - |

Automatically calculated variable which will be recalcuated every time variables are changed.

```htmlembedded
<div var="{ myVar: 1 }" auto-var="{ myAutoVar: [ myVar + 1 ] }">
    <p template>myAutoVar is {{myAutoVar}}</p>
</div>
```

will display:

<table>
    <tr>
        <td>
            <p>myAutoVar is 2</p>
        </td>
    </tr>
</table>

### `set-var="{ key1: value1 ... }"`

| App events | DOM events | Other directives | Triggers |
| - | - | - | - |
| - | `click` | `match-*` | `statechange` |

Set variables to specified values. It updates variables declared on the closest parents.


### `error-scope`

Automatically declares a `error` variable on the element.


## Events

### `statechange` event

| Bubbles | Handlable |
| ------- | --------- |
| No      | No        |

