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

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

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