Binding in Special Attribute"

From Documentation
Line 31: Line 31:
 
</source>
 
</source>
  
The first one (line 2) is a wrong usage. The button will never be created.
+
* Line 2: It is a wrong usage. The button will never be created.
  
In the second one (line 4), the button's creation is determined when a user visits the page and won't appear unless the user becomes a administrator and visits the page again.
+
* Line 4: The button's creation is determined when a user visits the page and won't appear unless the user becomes a administrator and visits the page again.
  
The thrid one is what we recommend for most cases. You can binding on <tt>visible</tt>, and it brings you almost the same effect as <tt>if</tt>. The <tt>disabled</tt> also has similar effect.
+
* Line 6,7: It is what we recommend for most cases. You can binding on <tt>visible</tt>, and it brings you almost the same effect as <tt>if</tt>. The <tt>disabled</tt> also has similar effect.
  
 
= The "forEach" Versus Children Binding =
 
= The "forEach" Versus Children Binding =
Line 57: Line 57:
 
</source>
 
</source>
  
The first usage (line 3) is a wrong one. It doesn't create multiple checkboxes.
+
* Line 3: It is a wrong one. It doesn't create multiple checkboxes.
  
In second one (line 5), the checkboxes are created at the beginning when a user visits the page and won't change even we change <tt>vm.personLIst</tt>.
+
* Line 5: The checkboxes are created at the beginning when a user visits the page and won't change even we change <tt>vm.personLIst</tt>.
  
The third one (line 7), [[ZK Developer's Reference/MVVM/Data Binding/Children%20Binding| children binding]], is used when you want dynamically create and destroy components.
+
* Line 7: The [[ZK Developer's Reference/MVVM/Data Binding/Children%20Binding| children binding]], is used when you want dynamically create and destroy components.
  
  

Revision as of 01:07, 18 March 2013


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

location:

  • MVVM/Advanced/Parameter
  • MVVM/Advanced/Binding in Special Attributes

Special Attribute Issue

ZK Bind is a post-processing work on components after they are created and it can control most attributes to change a component's status. But there are some special attributes that ZK Bind can't work on them because those attributes' value are determined and fixed when components are created such as if and forEach. Therefore, binding on these special attributes takes no effect on components. But you may want the function that those special attributes provide, here we demonstrate alternives in MVVM approach.

The "if" Versus the "visible"

Assume that you want to show a "Delete" button only to a user who has administrative permission. We have several usage:

specialAttribte.zul

		<!-- wrong usage, no effect -->
		<button label="Delete " if="@load(vm.currentUser.admin)" />
		<!-- determined at the beginning -->
		<button label="Delete (EL)" if="${vm.currentUser.admin}" />
		<!-- can change during user interaction -->
		<button label="Delete (visible)" visible="@load(vm.currentUser.admin)" />
		<button label="Delete (disabled)" disabled="@load(not vm.currentUser.admin)" />
		<checkbox label="Is Admin" checked="@bind(vm.currentUser.admin)" />
  • Line 2: It is a wrong usage. The button will never be created.
  • Line 4: The button's creation is determined when a user visits the page and won't appear unless the user becomes a administrator and visits the page again.
  • Line 6,7: It is what we recommend for most cases. You can binding on visible, and it brings you almost the same effect as if. The disabled also has similar effect.

The "forEach" Versus Children Binding

The forEach attribute also has the same issue.

specialAttribute.zul

	<!-- "forEach" versus children binding  -->
	<!-- wrong usage, no effect -->
	<checkbox label="@load(each.firstName)" forEach="@load(vm.personList)" />
	<!-- determined at the beginning -->
	<checkbox label="${each.firstName}" forEach="${vm.personList}" />
	<!-- children binding -->
	<div children="@load(vm.personList)">
		<template name="children">
			<checkbox label="@load(each.firstName)" />
		</template>
	</div>
  • Line 3: It is a wrong one. It doesn't create multiple checkboxes.
  • Line 5: The checkboxes are created at the beginning when a user visits the page and won't change even we change vm.personLIst.
  • Line 7: The children binding, is used when you want dynamically create and destroy components.



Version History

Last Update : 2013/03/18


Version Date Content
6.5.1 March 2013 Initial




Last Update : 2013/03/18

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