v/vlib/v/TEMPLATES.md

V allows for easily using text templates, expanded at compile time to V functions, that efficiently produce text output. This is especially useful for templated HTML views, but the mechanism is general enough to be used for other kinds of text output also.

Template directives

Each template directive begins with an @ sign. Some directives contain a {} block, others only have '' (string) parameters.

Newlines on the beginning and end are ignored in {} blocks, otherwise this (see if for this syntax):

@if bool_val {
    <span>This is shown if bool_val is true</span>
}

... would output:

    <span>This is shown if bool_val is true</span>

... which is less readable.

if

The if directive, consists of three parts, the @if tag, the condition (same syntax like in V) and the {} block, where you can write html, which will be rendered if the condition is true:

@if <condition> {}

Example

@if bool_val {
    <span>This is shown if bool_val is true</span>
}

One-liner:

@if bool_val { <span>This is shown if bool_val is true</span> }

The first example would result in:

    <span>This is shown if bool_val is true</span>

... while the one-liner results in:

<span>This is shown if bool_val is true</span>

for

The for directive consists of three parts, the @for tag, the condition (same syntax like in V) and the {} block, where you can write text, rendered for each iteration of the loop:

@for <condition> {}

Example for @for

@for i, val in my_vals {
    <span>$i - $val</span>
}

One-liner:

@for i, val in my_vals { <span>$i - $val</span> }

The first example would result in:

    <span>0 - "First"</span>
    <span>1 - "Second"</span>
    <span>2 - "Third"</span>
    ...

... while the one-liner results in:

<span>0 - "First"</span>
<span>1 - "Second"</span>
<span>2 - "Third"</span>
...

You can also write (and all other for condition syntaxes that are allowed in V):

@for i = 0; i < 5; i++ {
    <span>$i</span>
}

include

The include directive is for including other html files (which will be processed as well) and consists of two parts, the @include tag and a following '<path>' string. The path parameter is relative to the /templates directory in the corresponding project.

Example for the folder structure of a project using templates:

Project root
/templates
    - index.html
    /headers
        - base.html

index.html

<div>@include 'header/base'</div>

Note that there shouldn't be a file suffix, it is automatically appended and only allows html files.

js

The js directive consists of two parts, the @js tag and '<path>' string, where you can insert your src

@js '<url>'

Example for the @js directive:

@js 'myscripts.js'

Variables

All variables, which are declared before the $tmpl can be used through the @{my_var} syntax. It's also possible to use properties of structs here like @{my_struct.prop}.