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