|
|
(4 intermediate revisions by 3 users not shown) |
Line 1: |
Line 1: |
− | {{ZKDevelopersGuidePageHeader}}
| + | #REDIRECT [[ZK Developer's Reference/MVVM/Data Binding]] |
− | | |
− | Data Binding Manager is triggered by events, or users' activities. Thus, you must specify events in the ZUML annotation expression with <tt>load-when</tt> tag expression to tell Data Binding Manager when to load data from data source into the component's attribute.
| |
− | | |
− | <tt><component-name attribute-name="@{bean-name.attribute-name, </tt>
| |
− | | |
− | <tt>load-when='component-id.event-name'}'''"'''/></tt>
| |
− | | |
− | * <tt>component-id</tt> represents the ID of a UI component
| |
− | * <tt>event-name</tt> represents the event name
| |
− | | |
− | Multiple definition is allowed and would be called one by one.
| |
− | | |
− | In the following example, we demonstrate an example that the fullname of a Person will be updated automatically once his/her first name or last name has been modified.
| |
− | | |
− | Data Binding Manager will re-load <tt>value</tt> of <tt>Label </tt>whose id is<tt> fullName,</tt> from <tt>person.fullName</tt> when the either the value of <tt>Textbox</tt> whose id is <tt>firstName</tt> or <tt>lastName</tt> has been changed, in other words, <tt>onChange</tt> event is triggered. | |
− | | |
− | <source lang="xml" >
| |
− | <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
| |
− | | |
− | <window>
| |
− | <zscript><![CDATA[
| |
− | //prepare the example person object
| |
− | Person person = new Person();
| |
− | person.setFirstName("George");
| |
− | person.setLastName("Bush");
| |
− | ]]>
| |
− | </zscript>
| |
− | | |
− | <grid width="400px">
| |
− | <rows>
| |
− | <row> First Name:
| |
− | <textbox id="firstName" value="@{person.firstName}"/>
| |
− | </row>
| |
− | <row> Last Name:
| |
− | <textbox id="lastName" value="@{person.lastName}"/>
| |
− | </row>
| |
− | <row> Full Name:
| |
− | <label id="fullName" value="@{person.fullName,
| |
− | load-when='firstName.onChange,lastName.onChange'}"/>
| |
− | </row>
| |
− | </rows>
| |
− | </grid>
| |
− | </window>
| |
− | </source>
| |
− | | |
− | | |
− | {{ ZKDevelopersGuidePageFooter}}
| |