Reference Binding"
m ((via JWB)) |
m (replace tt with code (via JWB)) |
||
Line 13: | Line 13: | ||
Steps to use this feature: | Steps to use this feature: | ||
− | # Bind a custom attribute on a component with < | + | # Bind a custom attribute on a component with <code> @ref </code>. |
# Use the custom attribute in other EL expressions that are nested in children components | # Use the custom attribute in other EL expressions that are nested in children components | ||
Line 37: | Line 37: | ||
</source> | </source> | ||
− | As shown in the example above, we add a reference < | + | As shown in the example above, we add a reference <code>@ref</code> to '''vm.person''' with a name '''p''' to <i>vlayout</i>. This way, '''p''' inside the <i>vlayout</i> can be used by other EL expressions. |
Revision as of 14:13, 12 January 2022
This article is out of date, please refer to zk-mvvm-book/8.0/data_binding/reference_binding for more up to date information.
- Available for ZK:
Since 6.0.1
Make an expression reference
Reference binding allows us to reference an EL expression with a customized name. We can use this reference in another EL expression nested in the component that is binded to this reference. Typically, we use reference binding to shorten expressions or to modularize the view[1].
Steps to use this feature:
- Bind a custom attribute on a component with
@ref
. - Use the custom attribute in other EL expressions that are nested in children components
Basic usage example
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('foo.MyVM')">
<vlayout p="@ref(vm.person)">
<hlayout>
First Name: <textbox value="@bind(p.firstName)" />
</hlayout>
<hlayout>
Last Name: <textbox value="@bind(p.lastName)" />
</hlayout>
</vlayout>
</window>
As shown in the example above, we add a reference @ref
to vm.person with a name p to vlayout. This way, p inside the vlayout can be used by other EL expressions.
Modularize view example
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('foo.MyVM')">
<include p="@ref(vm.person1)" src="person.zul"/>
<include p="@ref(vm.person2)" src="person.zul"/>
</window>
Modularize view example - person.zul
<vlayout>
<hlayout>
First Name: <textbox value="@bind(p.firstName)"/>
</hlayout>
<hlayout>
Last Name: <textbox value="@bind(p.lastName)"/>
</hlayout>
</vlayout>
In the example above, we have a veiw - person.zul which binds components to p.firstName and p.lastName. This view could be reused by other views that provides a p reference.
Version History
Version | Date | Content |
---|---|---|
6.0.1 | May 2012 | The new reference-binding feature. |