Home Manual Reference Source Test

Template syntax

Source code of DOM-Renderer templates is legal HTML 5 markups with legal ECMAScript 6 template literals in it.

Typical example

<template>
    <h1 hidden="${! view.name}">
        Hello, ${view.name} !
    </h1>

    <ul data-view="profile">
        <template>
            <li title="${scope.name}">
                ${view.URL}
            </li>
            <li>${view.title}</li>
        </template>
    </ul>

    <ol data-view="job">
        <template>
            <li>${view.title}</li>
        </template>
    </ol>

    <input type="text" name="name" placeholder="Switch account">
</template>
Code Type Explanation
this Local variable The Element which current Template literals located at
view Local variable Data object of the View which current Template literals located at
scope Local variable Data object of the parent View which current Template literals located at
"${! view.name}" Template literal Evaluated value of Template literals supports all kinds of Data types
hidden="${! view.name}" HTML attribute HTML Boolean attributes are treated as DOM Properties
data-view="job" HTML attribute Attribute value is a key in current View data, Object or Array will map to Sub views
<template>...</template> HTML tag A <template /> may map to a View or Sub views, <!-- --> is a Compatibility option
<input name="name"> HTML tag The same-name value of Data object will be updated by User's inputting