ZPT-JS reference - Attributes - TALRepeat

Syntax

argument      ::= variable_name expression
variable_name ::= Name
                

Description

The data-repeat statement replicates a sub-tree of your document once for each item in an array. The expression should evaluate to an array. If the array is empty, then the statement element is deleted, otherwise it is repeated for each value in the sequence. If the expression is default, then the element is left unchanged, and no new variables are defined.

The variable_name is used to define a local variable and a repeat variable. For each repetition, the local variable is set to the current sequence element, and the repeat variable is set to an iteration object.

You use repeat variables to access information about the current repetition (such as the repeat index). The name of the repeat variable is built appending -repeat to the local variable name.

The following information is available from the repeat variable:

Note: some parts extracted from Zope Page Templates Reference.

Differences with ZPT

Examples

Iterating over a sequence of strings:

<p data-repeat="txt ['one' 'two' 'three']">
    <span data-replace="txt" />
</p>
                

Inserting a sequence of table rows, and using the repeat variable to number the rows:

<table>
    <tr data-repeat="item myObject/cart">
        <td data-content="item-repeat/number()">1</td>
        <td data-content="item/description">Widget</td>
        <td data-content="item/price">$1.50</td>
    </tr>
</table>
                

Nested repeats:

<table border="1">
    <tr data-repeat="row [1:10]">
        <td data-repeat="column [1:10]">
            <span data-define="x row-repeat/number();
                                y column-repeat/number();
                                z *: x y"
                  data-replace="string: ${x} * ${y} = ${z}">
                1 * 1 = 1
            </span>
        </td>
    </tr>
</table>
                

Nested repeats in action:

1 * 1 = 1

An important issue about using id attribute: don't set id attribute without using data-tattributtes, ZPT-JS copies several times the node inside the repeat so you will have got several HTML elements with the same id. So don't do:

<table>
    <tr id="cart" data-repeat="item myObject/cart">
        <td data-content="item/description">Widget</td>
    </tr>
</table>
                

We can fix it using data-tattributtes:

<table>
    <tr data-repeat="item myObject/cart" data-attributes="id string:cart${item-repeat/number()}">
        <td data-content="item/description">Widget</td>
    </tr>
</table>
                

Note: some parts extracted from Zope Page Templates Reference.