将相同的数据源关联至多个UI组件

一个数据源可以和多个UI组件相关联。一旦数据源被修改,数据绑定管理器会自动更新这些被关联的组件。

在下面的例子中,我们使用ZUML注释表达式将一个数据源Person的实例"selected"和多个UI组件关联,包括Listbox 和Grid。一旦用户选择了Listbox的一个项目,Grid就会展示被选中person 相应的信息。

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<window width="500px">
<zscript>
   //prepare the example person
     Person selected = new Person();
</zscript>

<listbox rows="4" selectedItem="@{selected}">
<listhead>
     <listheader label="First Name" width="100px"/>
      <listheader label="Last Name" width="100px"/>
     <listheader label="Full Name" width="100px"/>
   </listhead>
   <listitem>
     <listcell label="George"/>
     <listcell label="Bush"/>
   </listitem>
   <listitem>
     <listcell label="Bill"/>
     <listcell label="Gates"/>
   </listitem>
  </listbox>
    <!-- show the detail of the selected person -->
  <grid>
   <rows>
       <row>First Name: <textbox value="@{selected.firstName}"/></row>
       <row>Last Name: <textbox value="@{selected.lastName}"/></row>
   </rows>
  </grid>
</window>