ZK8 Features for MVC - Shadow Elements - Part 2"
From Documentation
Robertwenzel (talk | contribs) |
Robertwenzel (talk | contribs) |
||
Line 47: | Line 47: | ||
<label value="${each.label}"/> | <label value="${each.label}"/> | ||
</template> | </template> | ||
− | </ | + | </div> |
</source> | </source> | ||
Revision as of 11:03, 1 December 2016
Author
Robert Wenzel, Engineer, Potix Corporation
Robert Wenzel, Engineer, Potix Corporation
Date
December 2016
December 2016
Version
ZK 8.0
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:
<div forEach="${someCollection}">
${each.label}
<div>
- limited to static layouts at zul parse time
<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>
</div>
- 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. |