ZK 如何在不使用阴影组件的情况下渲染面包屑

Question

对于我试图制作的文件浏览器，我需要一个具有面包屑样式的导航器。我找到了一些使用社区版中未包含的 <forEach> 标记的示例。问题是：

有没有办法像面包屑一样呈现动态的 text/anchor (link)？或者有没有办法覆盖一些 <div id="someContainer" /> 以便 div 作为占位符可以用一些 children 以 MVVM 方式写入？
所以当点击 link 时面包屑会有一个动作。单击 link 时，它必须更新另一个 ListModelList object 的内容，如果单击前一个碎屑则更新自身。我怎样才能以 MVVM 风格做到这一点？

Fiddle 示例但使用影子组件 <forEach> https://zkfiddle.org/sample/ha19l0/1-zk-breadcrumbs

一些 zul 代码：

<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>

感谢您的帮助。

Answer 1

在 CE 中，您可以使用 children binding，它的语法不太直观，并且工作效率较低（但在面包屑的情况下并不重要）

这里是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>

子绑定被添加到父级，并将使用 <template name="children"> 迭代集合中的项目，<choose>/<when> 可以替换为静态 if attribute。即使是静态的，表达式也会在重新渲染子项时再次计算（因此它是动态的）。

在视图模型中，您必须通知更改 breadCrumbs 属性，这将重新呈现所有子项。（因为只有几个元素，影响应该不大）

ZK 如何在不使用阴影组件的情况下渲染面包屑

ZK How to render bread crumb without using shadow component

java

zk