---
tags: brew-js
---

# Template rendering

## Directives

### `template`

| App events | DOM events | Other directives | Triggers |
| ------------------------ | ---------- | ---------------- | ----------- |
| `mounted`, `statechange` | - | - | `domchange` |

Specifies element content and attributes should treated as template.

<div var="{ myVar: 1 }">
    <p template>{{myVar}}</p>
    <p>{{myVar}}</p>
    <button template disabled="{{myVar == 1}}">Button</button>
</div>

will display:

<table>
<tr>
<td>
<p>1</p>
<p>{{myVar}}</p>
<button disabled>Button</button>
</td>
</tr>
</table>

### `set-class="[object]"`

| App events | DOM events | Other directives | Triggers |
| ------------------------ | ---------- | ---------------- | ----------- |
| `mounted`, `statechange` | - | - | `domchange` |

Set CSS classes to element according to the values.

| Class name | Value | Resulting CSS Classes |
| ---------- | ---------------------------------- | -------------------------------- |
| `my-style` | `true` | `my-style` |
| `my-style` | `false`, `null`, `undefined`, `''` | (none) |
| `my-style` | `'strval'` | `my-style my-style-strval` |
| `my-style` | `['a','b']` | `my-style my-style-a my-style-b` |

Common usage is for toggling a CSS class:

<div var="{ disabled: true }">
    <a href="#" set-class="{ disabled: disabled }">Link</a>
</div>

### `set-style="[object]"`

| App events | DOM events | Other directives | Triggers |
| ------------------------ | ---------- | ---------------- | ----------- |
| `mounted`, `statechange` | - | - | `domchange` |

### `domchange` event