Templating & Interpolation

Don't be scared by these big words. This section helps you use the values a user has selected in your form elements. It is based on Vue.js.

Interpolation

Fig uses Mustache Syntax to access the currently selected value of a form element. You identify a form element by its identifier. The identifier is the first string in the square brackets.

:[name: What is your name?]{}
My name is: {{ name }}

:[age: How old are you?]{ 21 }
I am {{ age }} years old

```
echo "Your name is {{name}}"
echo "You are {{age}}"
```

How does Fig Render this?

Using JavaScript Expressions

Mustache braces allow you to access your element's output and use simple javascript expressions. Here is a list of some more expressions you can use.

{{ flag ? "On" : "Off" }}
​
{{ file.split('/').slice(-1).pop() }}
​
{{ number_one + 1}}

{{ number_one + number_two}}

Embedding Additional Data

To include additional information add a code block with the language set as data. The contents of this tag will be interpreted as a JSON object and will be accessible in template tags.

```data
{
  plans: {
    "free" : {
      price: 0
    },
    "medium": {
      price: 7
    },
    "large" : {
      price: 50
    }
  }
}
```

The Large Plan costs: ${{ plans["large"]["price"] }}