ZK How to render bread crumb without using shadow component

Question

For the file browser that I'm trying to make I need a navigator with breadcrumb style. I found some example using <forEach> tag that isn't included into the community edition. The Questions are:

1. Is there a way to render a dynamic text/anchor (link) like bread crumb? Or is there a way to overwrite some <div id="someContainer" /> so the div as placeholder can be write with some children in MVVM way?
2. So the breadcrumb will have an action when the link is click. When the link is clicked it must update the content of another ListModelList object and update itself if the previous crumb is clicked. How can I do that in MVVM style?

Fiddle example but using shadow component <forEach> https://zkfiddle.org/sample/ha19l0/1-zk-breadcrumbs

Some zul code:

<zk>
    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('com.my.zk.mvvm.MyFilesViewModel')">
        <hlayout>
            <listbox vflex="true" hflex="1" model="@load(vm.files)"
                id="fileBrowser" selectedItem="@bind(vm.selectedFile)">
                <auxhead>
                    <auxheader colspan="3">File List</auxheader>
                    <auxheader colspan="3">
                        <hlayout>
                            <!-- breadcrumb, implemented later -->
                            <div id="placeHolder" />
                        </hlayout>
                    </auxheader>
                </auxhead>
                <listhead>
                    <listheader label="Name" />
                    <listheader label="Size" />
                    <listheader label="Modified" />
                </listhead>
                <template name="model" var="file">
                    <!-- This is the model that need to be updated when bredcrumb is clicked -->
                    <listitem>
                        <listcell label="@load(file.name)" />
                        <listcell label="@load(file.length())" />
                        <listcell label="@load(file.lastModified())" />
                    </listitem>
                </template>
            </listbox>
        </hlayout>
        <separator />
    </window>
</zk>

Thanks for the help.

Answer 1

in CE you can use children binding which has a less intuitive syntax, and works less efficient (however not significant in case of breadcrumbs)

Here the updated example.

    <hlayout style="border:2px black solid;" children="@load(vm.breadcrumbs)">
      <template name="children">
        <hlayout>
            <nodom if="${each ne vm.currentPage}">
              <label style="text-decoration: underline blue; cursor:pointer;" value="${each.label}"
                     onClick="@command('navigateToPage', page=each)" />
              <label value=" > "/>
            </nodom>
            <label if="${each eq vm.currentPage}" style="font-weight: bold;" value="${each.label}"/>
        </hlayout>
      </template>
    </hlayout>

A children binding is added to the parent and will iterate over the items in the collection using the <template name="children">, <choose>/<when> can be replaced by the static if attribute. Even if static, the expression will evaluate again when the children are re-rendered (so it's kind of dynamic).

In the view model you have to notify change the breadCrumbs property which will then re-render all children. (Since it's only a few elements the impact shouldn't be significant)