---
# System prepended metadata

title: Template transformation
tags: [brew-js]

---

---
tags: brew-js
---

# Template transformation

## Directives

### `<apply-attribute />`

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

When mounted, apply attributes to all matched elements.

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

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

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

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