Plugin API » Templates » View properties

Views and view properties

Templates render a view, which is a nested JavaScript data structure containing arrays, objects (acting as dictionaries), primitive 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 context

When rendering the view, values are retrieved from the current context. This starts as the rendered view, and is changed by functions like each() and within().

To access values from the parent context, use the ^{} notation. Use one ^ character per level you want to traverse, eg ^^{} will use values from two levels up.

For example, in this template,

each(item) {
    <p>
        <a href=["/do/eg/item/" ^{docId} "/" itemId]> title </a>
    </p>
}

the docId property in the link will be obtained from the level above the item array, in a view like this:

{
    "docId": 1234,
    "item": [
        {"itemId":65, "title":"Item One"},
        {"itemId":87, "title":"Item Two"},
    ]
}

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.