---
tags: brew-js
---

# Template transformation

## Directives

### `<apply-attribute />`

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

When mounted, apply attributes to all matched elements.

<div>
    <apply-attribute elements="li" style="color: red"></apply-attribute>
    <ul>
        <li>This line will be red.</li>
        <li>This line will be red.</li>
        <li>This line will be red.</li>
    </ul>
</div>

The above thus becomes:

<table>
<td>
<ul>
<li style="color: red">This line will be red.</li>
<li style="color: red">This line will be red.</li>
<li style="color: red">This line will be red.</li>
</ul>
</td>
</table>

### `apply-template="[name]"`

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

It looks for another element that has the attribute `brew-template` with the same attribute value.

Then all attributes and contents are applied. The `<content>` elements in the template serves as placeholders where the original content is inserted.

<div brew-template="my-template" class="memo">
    <div class="memo-header">
        <content for="h1"></content>
    </div>
    <div class="memo-body">
        <content></content>
    </div>
</div>
<div id="memo" apply-template="my-template">
    <h1>Header</h1>
    <p>Paragraph</p>
</div>

When the element `#memo` is mounted, it is transformed into:

<div id="memo" class="memo" apply-template="my-template">
    <div class="memo-header">
        <h1>Header</h1>
    </div>
    <div class="memo-body">
        <p>Paragraph</p>
    </div>
</div>

### `foreach="[expression]"`

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

Generate sets of child content for each array item. The item can be accessed by the auto-generated `foreach` variable.

<ul foreach="[ 1 | 2 | 3 ]">
    <li template>Item {{$foreach}}</li>
</ul>

will results in

<table>
<td>
<ul>
<li template>Item 1</li>
<li template>Item 2</li>
<li template>Item 3</li>
</ul>
</td>
</table>

If `foreach` references other variables, the child content will be re-built. This is how the TODO app works.