zpt

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Conditionals</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 tutorial - Loops</h1> <ul> <li><a href="#intro">Intro</a>.</li> <li><a href="#advanced">Advanced repetition</a>.</li> </ul> </div> <article data-fill-slot="'article'"> <h2 data-attributes="id 'intro'">Intro</h2> <p> Now we are going to iterate through an array of objects to show its contents. Let's see the template: </p> <strong>sample.html</strong> <pre class="brush: 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> </pre> <p> And now the javascript code: </p> <strong>sample.js</strong> <pre class="brush: 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 }); </pre> <h2 data-attributes="id 'advanced'">Advanced repetition</h2> <p> There are a few minor variations for <code>tal:repeat</code>: </p> <ul> <li>The repeat expression must evaluate to an array.</li> <li>The repeat variable does not exist, use <code>[item-name]-repeat</code> variable:</li> </ul> <p> Repeat variables provide information about the current repetition. The following attributes are available on ‘repeat’ variables: </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> <pre class="brush: html"> <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> </pre> </article> </div> </body> </html>