---
# System prepended metadata

title: Templates and directives
tags: [brew-js]

---

---
tags: brew-js
---

# Templates and directives

Templates are simply HTML markup in document's body, with the use of *directives* and templated attributes and contents.

A simple example where a `myProp` is declared and used in a content template:

```htmlembedded
<!-- the following line use `var` directive to declare a variable -->
<body var="{ myProp: 1 }">
    <!-- the following line consume `myProp` by a Waterpipe template -->
    <p>myProp is equal to {{myProp}}</p>
</body>
```

will result in:

<table>
    <tr>
        <td><p>myProp is equal to 1</p></td>
    </tr>
</table>

## Template syntax

The template engine used is [Waterpipe](https://github.com/misonou/waterpipe/wiki), with the following special syntax for object creation:

```
{ varName1: constant varName2: [ complicatedExpression ] }
```

whever a directive expects the format `{ key1: value1 ... }`.

## Updating template variables

Template variables work separately from the properties of app instance. It means template variables must be explicitly updated, either through directives or `brew.setVar`.

With the previous example, by calling

```typescript
brew.setVar(document.body, { myProp: 2 })
```

with update the content like:

<table>
    <tr>
        <td><p>myProp is equal to 2</p></td>
    </tr>
</table>

## Variable scope

Template variables are scoped by the element declared on, that means:

```htmlembedded
<body var="{ myProp: 1 }">
    <p>myProp is equal to {{myProp}}</p>
    <p var="{ myProp: 2 }">myProp is equal to {{myProp}}</p>
    <p var="{ myProp: 3 }">myProp is equal to {{myProp}}</p>
</body>
```

will result in:

<table>
    <tr>
        <td>
            <p>myProp is equal to 1</p>
            <p>myProp is equal to 2</p>
            <p>myProp is equal to 3</p>
        </td>
    </tr>
</table>
