Conditionals

Intro

Now we are going to iterate through an array of objects to show its contents. Let's see the template:

sample.html

<table>
    <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Description</th>
    </tr>
    <tr data-repeat="item tools">
        <td data-content="item/name">the name</td>
        <td data-content="item/price">the price</td>
        <td data-content="item/description">the description</td>
    </tr>
</table>

And now the javascript code:

sample.js

import { zpt } from './zpt-esm.js';

var dictionary = { 
    tools: [
        {
            name: "Hammer",
            price: 15,
            description: "Tool with a heavy metal head mounted at right angles at the end of a handle, used for jobs such as breaking things and driving in nails."
        },
        {
            name: "Saw",
            price: 25,
            description: "A hand tool for cutting wood or other hard materials, typically with a long, thin serrated blade and operated using a backwards and forwards movement."
        },
        {
            name: "Screwdriver",
            price: 20,
            description: "A tool with a flattened or cross-shaped tip that fits into the head of a screw to turn it."
        }
    ]
};

zpt.run({
    root: document.body,
    dictionary: dictionary
});

Advanced repetition

There are a few minor variations for tal:repeat:

The repeat expression must evaluate to an array.
The repeat variable does not exist, use [item-name]-repeat variable:

Repeat variables provide information about the current repetition. The following attributes are available on ‘repeat’ variables:

index(). Repetition number, starting from zero.
number(). Repetition number, starting from one.
even(). True for even-indexed repetitions (0, 2, 4, …).
odd(). True for odd-indexed repetitions (1, 3, 5, …).
start(). True for the starting repetition (index 0).
end(). True for the ending, or final, repetition.
length(). Length of the sequence, which will be the total number of repetitions.
letter(). Repetition letter, starting from a.
Letter(). Repetition letter, starting from A.
roman(). Repetition roman number, starting from i.
Roman(). Repetition roman number, starting from I.

<table>
    <tr>
        <th>Value</th>
        <th>Index</th>
        <th>Number</th>
        <th>Even index</th>
        <th>Odd index</th>
        <th>Start</th>
        <th>End</th>
        <th>Length</th>
        <th>Letter</th>
        <th>Capital Letter</th>
        <th>Roman</th>
        <th>Capital Roman</th>
    </tr>
    <tr data-repeat="item tools">
        <td data-content="item/name">value</td>
        <td data-content="item-repeat/index()">index</td>
        <td data-content="item-repeat/number()">number</td>
        <td data-content="item-repeat/even()">even</td>
        <td data-content="item-repeat/odd()">odd</td>
        <td data-content="item-repeat/start()">start</td>
        <td data-content="item-repeat/end()">end</td>
        <td data-content="item-repeat/length()">length</td>
        <td data-content="item-repeat/letter()">letter</td>
        <td data-content="item-repeat/Letter()">capital letter</td>
        <td data-content="item-repeat/roman()">roman</td>
        <td data-content="item-repeat/Roman()">capitalRoman</td>
    </tr>
</table>

ZPT-JS tutorial - Loops

Intro

Advanced repetition