Инструменты пользователя

Инструменты сайта


limb3_2007_4:en:packages:macro:list_tags

Rendering lists or tables

{{macro}} tags for rendering lists

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:

  • Tag {{list}} - main tag that renders it's content if variable named by using attribute is non empty array or Iterator. as attribute tells list tag name of temporary variable that will contain a reference to every next element of the list. By default as attribute has $item value.
  • Tag {{list:item}} - repeats it's content for every element of the list.
  • Tag {{list:empty}} - renders it's content is case if the list is empty.
  • Tag {{list:glue}} - used to render a portion of template to separate elements in the list.
  • $number variable that contains row number of the list. $number is generated since we used counter attribute for list tag.

There can be two different kinds of rendering results: for non empty lists and for empty lists:

Non empty:

TitleVolume, litersWeight, kg
1 Tank AB-102 2400 340
2 Tank AB-103 2000 300

Empty:

TitleVolume, litersWeight, kg
List is empty!

Rendering multi-column lists

To render a multi-column list (for example 3 items in a row) tag {{list:glue}} is used that can render it's content ones per several steps. The value of step is set by a step attribute of 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 noticed the example above will produce invalid html-layout for lists with number of elements unevenly three. 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}'>&nbsp;</td>
 {{/list:fill}}
</tr>
</table>
{{/list}}

Tag fill outputs it's contents only if list has number of elements more than zero but unevenly some value that is specified by upto attribute. 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 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}}

More examples

Обсуждение

Ваш комментарий. Вики-синтаксис разрешён:
 ______   ___    __  ___   ___    _  __
/_  __/  / _ \  /  |/  /  / _ )  | |/_/
 / /    / ___/ / /|_/ /  / _  | _>  <  
/_/    /_/    /_/  /_/  /____/ /_/|_|
 
limb3_2007_4/en/packages/macro/list_tags.txt · Последние изменения: 2010/11/10 10:02 (внешнее изменение)