Views and view properties

Templates render a view, which is a nested JavaScript data structure containing arrays, objects (acting as dictionaries), primitve types like strings and numbers, and any other JavaScript object.

HSVT uses the view structure to generate HTML, through control flow with template functions like if() and each(), or inserting the values from the view with view properties.

Referring to a value in the view for either purpose is written as a bare word. Use the . notation to access nested values. For example the template:

<div> <span> xyz </span> abc.zyx </div>

with a view of

{
    "xyz": "One",
    "abc": {
        "zyz": "Two"
    }
}

is rendered as

<div><span>One</span>Two</div>

View root

. is a special literal name which refers to the root of the current template. It’s most often used to render items in an array when you iterate over them with each().

This template,

each(sentence) {
    <p> . </p>
}

when given a view like this,

{
    "sentence": [
        "One", "Two", "Three"
    ]
}

will render each sentence in it’s own <p> tag.

Escaping

You do not need to worry about escaping values to prevent security flaws like XSS. HSVT parses your template, understands the HTML structure, and chooses the right escaping mode for the context.