Reference Binding"

From Documentation
m ((via JWB))
 
(24 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
 +
{{Deprecated | url=[http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/reference_binding.html zk-mvvm-book/8.0/data_binding/reference_binding]|}}
  
{{Template:UnderConstruction}}
 
  
 
__TOC__
 
__TOC__
  
 +
{{ZK PE and EE}}
 
  Since 6.0.1
 
  Since 6.0.1
  
 
=Make an expression reference=
 
=Make an expression reference=
  
Reference binding allows us to make a reference for a EL expression with a custom name. We can use the reference in another EL expression nested in the component that has this reference binding. Typically we use reference binding to make expression shorter or modularize the view<ref>When using this feature, you have to avoid to save to a first-term only expression, read http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVVM/Data_Binding/Property_Binding#Limitation for more detail.</ref>.
+
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<ref>When using this feature, you have to avoid saving to a first-term only expression, read [http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVVM/Data_Binding/Property_Binding#Limitation here] for more detail.</ref>.
  
 
Steps to use this feature:
 
Steps to use this feature:
# Bind a custom attribute on a component with <tt> @ref </tt>.
+
# Bind a custom attribute on a component with <code>@ref</code>.
# Use the custom attribute in other EL expressions that nest in children components
+
# Use the custom attribute in other EL expressions that are nested in children components
  
 
<blockquote>
 
<blockquote>
Line 21: Line 22:
  
 
'''Basic usage example'''
 
'''Basic usage example'''
<source lang="xml" high="3,5,8">
+
<source lang="xml" highlight="3,5,8">
  
 
<window apply="org.zkoss.bind.BindComposer"  
 
<window apply="org.zkoss.bind.BindComposer"  
Line 36: Line 37:
  
 
</source>
 
</source>
In above example, we add a reference to '''vm.person''' with name '''p''' to the vlayout. So, inside the vlayout, the '''p''' could be used by other EL expression.
+
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.
  
  
'''Moudlarize view example'''
+
'''Modularize view example'''
<source lang="xml" high="3,4">
+
<source lang="xml" highlight="3,4">
  
 
<window apply="org.zkoss.bind.BindComposer"  
 
<window apply="org.zkoss.bind.BindComposer"  
Line 49: Line 50:
  
 
</source>
 
</source>
'''Moudlarize view example - person.zul'''
+
 
<source lang="xml" high="3,6">
+
'''Modularize view example - person.zul'''
 +
 
 +
<source lang="xml" highlight="3,6">
 
<vlayout>
 
<vlayout>
 
<hlayout>
 
<hlayout>
Line 61: Line 64:
 
</source>
 
</source>
  
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'''.
+
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 History=
{{LastUpdated}}
+
 
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 07:35, 8 July 2022



Stop.png 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:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion pe-ee.png
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:

  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.


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.




Last Update : 2022/07/08

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