Under MVVM pattern, ZK offers ZK Bind to manage communications between the View and the ViewModel.

• Server MVVM: This represents the traditional approach wherein ZK Bind operations occur on the server side.
• Client MVVM: Introduced in ZK 10, this innovative approach executes ZK Bind operations on the client side, resulting in reduced server memory consumption and optimized performance.

<?component name="listheader" extends="listheader" width="105px"?>
<zk>
    <splitlayout orient="horizontal" height="500px" apply="demo.mvvm.client.TimeDisplayComposer">
        <groupbox apply="org.zkoss.clientbind.ClientBindComposer" viewModel="@id('vm') @init('demo.mvvm.client.ClearItemsVM')"
                  hflex="1" vflex="1" contentStyle="overflow: auto">
            <caption iconSclass="z-icon-chrome" label="Client MVVM"/>
            <apply template="timeRecord"/>
            <apply template="listbox"/>
        </groupbox>
        <groupbox viewModel="@id('vm') @init('demo.mvvm.client.ClearItemsVM')"
                  hflex="1" vflex="1" contentStyle="overflow: auto">
            <caption iconSclass="z-icon-server" label="Server MVVM"/>
            <apply template="timeRecord"/>
            <apply template="listbox"/>
        </groupbox>
    </splitlayout>
    <template name="timeRecord">
        <div sclass="area">
            Server Execution Time:
            <label sclass="time-value blinking"/>
            ms
        </div>
    </template>
    <template name="listbox">
        <div sclass="area">
            <button label="Fill" onClick="@command('fill')"/>
            <button label="Clear" onClick="@command('clear')"/>
        </div>
        <listbox model="@load(vm.model)" vflex="1">
            <custom-attributes org.zkoss.zul.listbox.rod="true"/>
            <listhead>
                <listheader />
                <listheader />
                <listheader />
                <listheader />
                <listheader />
                <listheader />
                <listheader />
                <listheader />
                <listheader />
                <listheader />
            </listhead>
            <template name="model">
                <listitem>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                    <listcell>
                        <textbox value="@load(each)" width="85px"/>
                    </listcell>
                </listitem>
            </template>
        </listbox>
    </template>
    <style src="/widgets/getting_started/client_mvvm/style.css"/>
</zk>

package demo.mvvm.client;

import org.zkoss.bind.annotation.*;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zul.ListModelList;

import java.util.*;

public class ClearItemsVM {

    private ListModelList<String> model = new ListModelList<>();
    private List dataList = new LinkedList();
    public ClearItemsVM() {
        for (int i = 0; i < 2000; i++) {
            dataList.add("item"+ i);
        }
    }

    private Component root;
    @AfterCompose
    public void findRoot(@ContextParam(ContextType.VIEW) Component component){
        this.root = component;
    }

    @Command
    public void fill() {
        model.addAll(dataList);
        Events.echoEvent("onSentTime", root, null ); //send client complete time back to performance meter
    }
    @Command
    public void clear() {
        model.clear();
        Events.echoEvent("onSentTime", root, null ); //send client complete time back to performance meter
    }

    public ListModelList<String> getModel() {
        return model;
    }

    public void setModel(ListModelList<String> model) {
        this.model = model;
    }

}