将一个集合和一个组件关联是非常有用的，数据绑定管理器会将集合转换为相应的UI组件。
准备集合的数据源。
将集合和那些支持的UI组件，例如Listbox, Grid, 和 Tree 的model属性相关联。
定义一个UI组件模板。
使用self属性定义一个你想要的变量，用来呈现集合内的每个实例。
<component-name self="@{each='variable-name'}"/>
variable-name仅对于component-name 和它的子组件是可见的。
将UI组件和变量关联。
<component-name attribute-name="@{variable-name.attribute-name}"/>
在下面的例子中，我们将展示如何将一个集合和Listbox关联来显示person列表。
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<window width="500px">
<zscript>
//prepare the example persons List
int count = 30;
List persons = new ArrayList();
for(int j= 0; j < count; ++j) {
Person personx = new Person();
personx.setFirstName("Tom"+j);
personx.setLastName("Hanks"+j);
persons.add(personx);
}
</zscript>
<listbox rows="4" model="@{persons}">
<listhead>
<listheader label="First Name" width="100px"/>
<listheader label="Last Name" width="100px"/>
<listheader label="Full Name" width="100px"/>
</listhead>
<listitem self="@{each='person'}">
<listcell>
<textbox value="@{person.firstName}"/>
</listcell>
<listcell>
<textbox value="@{person.lastName}"/>
</listcell>
<listcell label="@{person.fullName}"/>
</listitem>
</listbox>
</window>