ZPT-JS tutorial - Loops

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
"use strict";

var zpt = require( 'zpt' );

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:

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

<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>