zpt

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ZPT-JS reference - Attributes - TALRepeat</title> <script type="text/javascript" src="../lib/zpt.min.js" defer></script> <script type="text/javascript" src="../js/zpt.js" defer></script> <script type="text/javascript" src="../lib/syntaxHighlighter/lib.js"></script> <link rel="stylesheet" type="text/css" href="../docs.css"> <link rel="stylesheet" type="text/css" href="../lib/syntaxHighlighter/theme.css"> </head> <body> <div data-use-macro="'page@templates.html'"> <div data-fill-slot="'page-header'"> <h1>ZPT-JS reference - Attributes - TALRepeat</h1> <ul> <li><a href="#syntax">Syntax</a>.</li> <li><a href="#description">Description</a>.</li> <li><a href="#differences">Differences with ZPT</a>.</li> <li><a href="#examples">Examples</a>.</li> </ul> </div> <article data-fill-slot="'article'"> <h2 data-attributes="id 'syntax'">Syntax</h2> <pre class="syntax"> argument ::= variable_name expression variable_name ::= Name </pre> <h2 data-attributes="id 'description'">Description</h2> <p> The <em>data-repeat</em> 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 <code>default</code>, then the element is left unchanged, and no new variables are defined. </p> <p> The <em>variable_name</em> 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. </p> <p> 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 <em>-repeat</em> to the local variable name. </p> <p> The following information is available from the repeat variable: </p> <ul> <li><em>index()</em>. Repetition number, starting from zero.</li> <li><em>number()</em>. Repetition number, starting from one.</li> <li><em>even()</em>. True for even-indexed repetitions (0, 2, 4, …).</li> <li><em>odd()</em>. True for odd-indexed repetitions (1, 3, 5, …).</li> <li><em>start()</em>. True for the starting repetition (index 0).</li> <li><em>end()</em>. True for the ending, or final, repetition.</li> <li><em>length()</em>. Length of the sequence, which will be the total number of repetitions.</li> <li><em>letter()</em>. Repetition letter, starting from a.</li> <li><em>Letter()</em>. Repetition letter, starting from A.</li> <li><em>roman()</em>. Repetition roman number, starting from i.</li> <li><em>Roman()</em>. Repetition roman number, starting from I.</li> </ul> <p> Note: some parts extracted from <a href="https://zope.readthedocs.io/en/latest/zopebook/AppendixC.html#repeat-repeat-an-element">Zope Page Templates Reference</a>. </p> <h2 data-attributes="id 'differences'">Differences with ZPT</h2> <ul> <li> The expression should evaluate to an array. In ZPT should evaluate to a sequence. </li> <li> The built-in variable <code>repeat</code> does not exist. The name of the repeat variable is built appending <em>-repeat</em> to the local variable name. For example, if the local variable name of the loop is <code>item</code> the repeat variable is <code>item-repeat</code>. </li> <li> The available data in the repeat variable are functions (must use parenthesis to access them). In ZPT are simple properties (must NOT use parenthesis). </li> </ul> <h2 data-attributes="id 'examples'">Examples</h2> <p> Iterating over a sequence of strings: </p> <pre class="brush: html"> <p data-repeat="txt ['one' 'two' 'three']"> <span data-replace="txt" /> </p> </pre> <p> Inserting a sequence of table rows, and using the repeat variable to number the rows: </p> <pre class="brush: html"> <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> </pre> <p> Nested repeats: </p> <pre class="brush: html"> <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> </pre> <p> Nested repeats in action: </p> <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> <p> An important issue about using id attribute: don't set id attribute without using <em>data-tattributtes</em>, 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: </p> <pre class="brush: html"> <table> <tr id="cart" data-repeat="item myObject/cart"> <td data-content="item/description">Widget</td> </tr> </table> </pre> <p> We can fix it using <em>data-tattributtes</em>: </p> <pre class="brush: html"> <table> <tr data-repeat="item myObject/cart" data-attributes="id string:cart${item-repeat/number()}"> <td data-content="item/description">Widget</td> </tr> </table> </pre> <p> Note: some parts extracted from <a href="https://zope.readthedocs.io/en/latest/zopebook/AppendixC.html#repeat-repeat-an-element">Zope Page Templates Reference</a>. </p> </article> </div> </body> </html>