---
# System prepended metadata

title: Template rendering
tags: [brew-js]

---

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

```htmlembedded
<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:

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