Let's consider the following example:
<table border="1"> <tr> <th>№</th> <th>Title</th> <th>Volume, liters</th> <th>Weight, kg</th> </tr> {{list using="$#tanks" as="$tank" counter="$number"}} {{list:item}} <tr> <td>{$number}</td> <td>{$tank.name}</td> <td>{$tank.volume}</td> <td>{$tank.weight}</td> </tr> {{/list:item}} {{list:empty}} <tr><td colspan='4'>List is empty!</td></tr> {{/list:default}} {{/list}} </table>
To render a list or a table with {{macro}} you will need a group of ListTags:
There can be two different kinds of rendering results: for non empty lists and for empty lists:
Non empty:
№ | Title | Volume, liters | Weight, kg |
---|---|---|---|
1 | Tank AB-102 | 2400 | 340 |
2 | Tank AB-103 | 2000 | 300 |
Empty:
№ | Title | Volume, liters | Weight, kg |
---|---|---|---|
List is empty! |
To render a multi-column list (for example 3 items in a row) tag {{list:glue}} is used that can render its content once per several steps. The value of step can be set by a step attribute of the {{list:glue}} tag.
For example:
{{list using="$#images"}} <table> <tr> {{list:item}} <td> <img src='{$item.path}' border='0' /><br />{$item.title} </td> {{list:glue step="3"}}</tr><tr>{{/list:glue}} {{/list:item}} </tr> </table> {{/list}}
This template will output images in 3 columns.
As you may have noticed the example above will produce invalid HTML layout for lists with number of elements not evenly divisible by 3. Let's fix this by applying tag {{list:fill}}:
{{list using="$#images"}} <table> <tr> {{list:item}} <td> <img src='{$item.path}' border='0' /><br />{$item.title} </td> {{list:glue step="3"}}</tr><tr>{{/list:glue}} </list:item> {{list:fill upto='3' items_left='$items_left'}} <td colspan='{$items_left}'> </td> {{/list:fill}} </tr> </table> {{/list}}
Tag {{list:fill}} outputs its contents only if list has a number of elements more than zero but up to some value that is specified by upto attribute. {{list:fill}} also fills a variable named according to items_left attribute that holds a number of items required to produce a valid layout.
You can also consider using tag {{repeat}} with {{list:fill}} to render missing items:
{{list using="$#images"}} <table> <tr> {{list:item}} <td> <img src='{$item.path}' border='0' /><br />{$item.title} </td> {{list:glue step="3"}}</tr><tr>{{/list:glue}} {{/list:item}} {{list:fill upto='3' items_left='$some_var'}} {{repeat times='{$some_var}'}} <td> <img src='/images/no_image.gif' alt='sorry, no image' /> </td> {{repeat}} {{/list:fill}} </tr> </table> {{/list}}
Обсуждение