Binding in Special Attribute"

From Documentation
 
(24 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
 +
 +
 +
{{UnderConstruction}}
 
location:
 
location:
−
MVVM/Advanced/Parameter
+
* MVVM/Advanced/Parameter
−
MVVM/Advanced/Binding in Special Attributes
+
* MVVM/Advanced/Binding in Special Attributes
  
 +
= Special Attribute Issue =
 +
<!-- ZK Bind doesn't work on those special attributes. -->
  
−
When a ViewModel's property changes, ZK will re-load those corresponding bindings on attributes. Then this reloading usually causes a UI change because attributes control a component's status and behavior. This is the basic way we change an attribute's value in MVVM approach. But there are [[ZUML_Reference/ZUML/Attributes| some special attributes]] that we can't do so. ZK will not reload value of these special attributes after a component is created and their value is determined and fixed at creation phase. Therefore, we should bind these special attributes to those properties that will not change after component creation (or uses these attributes in the condition that don't care the changed properties).
+
ZK Bind is a post-processing work on components after they have been created and it can control most attributes to change a component's status. However, there are [[ZUML_Reference/ZUML/Attributes| some special attributes]] such as <code>if</code> and <code>forEach</code> in which ZK Bind can't work on because these attributes' value are determined and fixed when components are created. Therefore, binding these special attributes takes no effect on components, but you may want to use the functions that these special attributes provide, here we demonstrate alternative methods in MVVM approach.
  
 +
= The "if" Versus the "visible" =
 +
<!-- binding in "visible" and "disabled" instead of "if" -->
  
−
Assume that an user's permission is unchanged when he visits the page and only the user with "admin" permission can see the "Delete" button. Then we can write a binding on <tt>if</tt> as follows:  
+
Assume that you want to show a "Delete" button only to a user who has administrative permission. There are several usages:  
  
−
<source lang='xml' high='3'>
+
'''specialAttribte.zul'''
 +
<source lang='xml' highlight='2, 4, 6,7'>
  
−
<!-- "if" usage  -->
+
<!-- wrong usage, no effect -->
−
<button label="Edit" />
+
<button label="Delete " if="@load(vm.currentUser.admin)" />
−
<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)" />
 
</source>
 
</source>
  
−
On the page above, those users without "admin" permission can't see the "Delete" button. Even if you assign the user with "admin" permission through a command, the "Delete" will not appear. But if you visit the page again after assigning the user "admin" permission, the button will appear.
+
* Line 2: It is a wrong usage; the delete 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 bind on <code>visible</code>, and it brings you almost the same effect as <code>if</code>. The <code>disabled</code> also has similar effect.
 +
 
 +
= The "forEach" Versus Children Binding =
 +
<!--* forEach -> children binding -->
 +
The <code>forEach</code> attribute also has the same issue.
 +
 
 +
'''specialAttribute.zul'''
 +
<source lang='xml' highlight='3,5,7'>
 +
 
 +
<!-- "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>
 +
</source>
 +
 
 +
* Line 3: It is a wrong usage; 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 if we change <code>vm.personLIst</code>.
 +
 
 +
* Line 7:  [[ZK Developer's Reference/MVVM/Data Binding/Children%20Binding| Children binding]] is used when you want to dynamically create and destroy components.
 +
 
 +
=Version History=
 +
{{LastUpdated}}
 +
{| border='1px' | width="100%"
 +
! Version !! Date !! Content
 +
|-
 +
| 6.5.1
 +
| March 2013
 +
| Initial
 +
|}

Latest revision as of 07:29, 8 July 2022


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 have been created and it can control most attributes to change a component's status. However, there are some special attributes such as if and forEach in which ZK Bind can't work on because these attributes' value are determined and fixed when components are created. Therefore, binding these special attributes takes no effect on components, but you may want to use the functions that these special attributes provide, here we demonstrate alternative methods 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. There are several usages:

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 delete 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 bind 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 usage; 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 if we change vm.personLIst.
  • Line 7: Children binding is used when you want to dynamically create and destroy components.

Version History

Last Update : 2022/07/08


Version Date Content
6.5.1 March 2013 Initial
Retrieved from "https://www.zkoss.org/_w/index.php?title=User:Hawk/Binding_in_Special_Attribute&oldid=54645"