<j:List items="#bind(data.photos)">


                <j:template>


                    <div style="float:left">


                        <img src="#bind(item.imageUrl)" width="100"/>


                    </div>


                </j:template>


            </j:List>

Description

The seven lines of markup above generated all the images you can see on the page.

In the previous example, we discussed binding containers. List is one of the most powerful binding containers in Jitsu.

List lets you bind to a list of items and specify a template that is stamped out for each of the items in the list.

In this example, we bind against a dataset containing photos. But instead of showing a single item, we're going to define a template stamped out for every item in the list.

First, we need to tell List to use the photos dataset:

    <j:List items="#bind(data.photos)">
    

This binds to the dataset called "photos" we have loaded into the page.

Then we define a template to stamp out for each Photo in the list:

    <j:template>
        <div style="float:left">
            <img src="#bind(item.imageUrl)" width="100"/>
        </div>
    </j:template>
    

Notice that the template contains HTML elements that have databinding expressions on them - Jitsu automatically upgrades HTML elements into lightweight controls when you start attaching bindings and behaviors to them.

The List control stamps out a copy of the template for each item in the list. Within a List template, you bind to item to retrieve properties of the current item being displayed. So src="#bind(item.imageUrl)" makes an image whose src is bound to the current item's imageUrl property (one of the properties we defined on each Photo in the Photos dataset).

What, no iterators?

Some web frameworks use iterators for creating lists of items. e.g. in Turbo Gears you write:

        <table>
            <tr py:for="person in people">
                <td><span py:content="person.name">
                    Kevin Bacon
                </span></td>
            </tr>
        </table>    
    

Jitsu doesn't use iterators - in Jitsu the List control has a rich set of behaviors that go beyond simply iterating over a dataset stamping out templates. The list control supports interactions, selection, drag-and-drop, and animation. Of course, the list control also uses hot binding - if the dataset the list is bound to changes, the list updates automatically. You'll see more of List in other quick tours.