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