Small Talks/2017/March/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 => re-render all elements
• allows adding/removing single elements => re-render 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 => re-render all elements
• (before ZK 8) didn't update adding/removing single elements => needed to re-render all elements
• requires MVVM / BindComposer

Comments

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