ZK8 Features for MVC - Shadow Elements - Part 2"

From Documentation
Line 15: Line 15:
 
Let's look at what's been there before:
 
Let's look at what's been there before:
  
−
special attribute: [https://www.zkoss.org/wiki/ZUML_Reference/ZUML/Attributes/forEach forEach]
+
[https://www.zkoss.org/wiki/ZUML_Reference/ZUML/Attributes/forEach forEach-attribute]
  
−
[https://www.zkoss.org/wiki/ZK_Developer's_Reference/MVC/Model/List_Model ListModel] support by specific components (grid/listbox/combobox/tabbox ...)
+
<source lang="xml">
 +
<div forEach="${someCollection}">
 +
    ${each.label}
 +
<div>
 +
</source>
  
−
[http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/children_binding.html children-binding] restricted to MVVM
+
* limited to static layouts at zul parse time
 +
 
 +
[https://www.zkoss.org/wiki/ZK_Developer's_Reference/MVC/Model/List_Model ListModel]
 +
 
 +
<source lang="xml">
 +
<listbox model="${someListModel}">
 +
    <template name="model">
 +
        <listitem label="${each.label}"/>
 +
    </template>
 +
</listbox>
 +
</source>
 +
 
 +
* allows replacing the whole Model => rerender all elements
 +
* allows adding/removing single elements => rerender only affected elements
 +
* supported only by specific components (grid/listbox/combobox/tabbox ...)
 +
 
 +
[http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/children_binding.html children-binding]  
 +
restricted to MVVM
 +
 
 +
<source lang="xml">
 +
<div children="${someListModel}">
 +
    <template name="children">
 +
        <label value="${each.label}"/>
 +
    </template>
 +
</listbox>
 +
</source>
 +
 
 +
* allows replacing the whole Model => rerender all elements
 +
* (since ZK 8) allows adding/removing single elements => rerender only affected elements
  
 
== <forEach> usages ==
 
== <forEach> usages ==

Revision as of 11:02, 1 December 2016

DocumentationSmall Talks2017MarchZK8 Features for MVC - Shadow Elements - Part 2
ZK8 Features for MVC - Shadow Elements - Part 2
Author
Robert Wenzel, Engineer, Potix Corporation
Date
December 2016
Version
ZK 8.0

Introduction

In continuation of the previous article LINK ME I'll focus this time on the shadow element <forEach>.

Some background

The intention behind <forEach> are similar to those of the <apply> shadow element. Several historically evolved mechanisms to repeat UI components with their own specific behavior and limitations needed a unified abstraction to become more versatile and layout neutral (no additional DOM elements) at the same time.

Let's look at what's been there before:

forEach-attribute 

<div forEach="${someCollection}">
    ${each.label}
<div>
  • limited to static layouts at zul parse time

ListModel 

<listbox model="${someListModel}">
    <template name="model">
        <listitem label="${each.label}"/>
    </template>
</listbox>
  • allows replacing the whole Model => rerender all elements
  • allows adding/removing single elements => rerender only affected elements
  • supported only by specific components (grid/listbox/combobox/tabbox ...)

children-binding restricted to MVVM 

<div children="${someListModel}">
    <template name="children">
        <label value="${each.label}"/>
    </template>
</listbox>
  • allows replacing the whole Model => rerender all elements
  • (since ZK 8) allows adding/removing single elements => rerender only affected elements

<forEach> usages

static usage (index, array, collection)

dynamic usage (ListModel)

Adding templates

with dynamic templates

control from java code (MVC)

Summary

Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
Retrieved from "https://www.zkoss.org/_w/index.php?title=Small_Talks/2017/March/ZK8_Features_for_MVC_-_Shadow_Elements_-_Part_2&oldid=45422"