Reference Binding"

From Documentation
Line 36: Line 36:
  
 
</source>
 
</source>
As shown in the example above, we add a reference <tt>@ref</tt> to '''vm.person''' with a name '''p''' to <i>vlayout</i>. As a result, '''p'''  inside the vlayout can be used by other EL expressions.
+
As shown in the example above, we add a reference <tt>@ref</tt> 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 03:16, 12 March 2012



WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!

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 implement this feature:

  1. Bind a custom attribute on a component with @ref .
  2. Use the custom attribute in other EL expressions that are nested in children components

  1. When using this feature, you have to avoid saving to a first-term only expression, read here for more detail.

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.


Moudlarize 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>

Moudlarize 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 above example, 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 reference p.

Version History

Last Update : 2012/03/12


Version Date Content
6.0.1 May 2012 The new reference-binding feature.




Last Update : 2012/03/12

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.