绑定数据到zk中的listitem

Question

我试图找出 Zk 框架中的 forEach 属性。这是 forEach:

的定义

This attribute is used in conjunction with collections. For each element in the collection, the element is rendered with the concrete value. Example:

{listitem label="${each}" forEach="${elements}" /}

我有一个试图填充 listitem:

的 zul 页面

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <window title="new page title" border="normal"
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('sampleViewModel')@init('deneme.tahasozgen.ornek1.SampleViewModel')">
        New Content Here!

        <hlayout>
            count:
            <label value="@load(sampleViewModel.count)" />
        </hlayout>

        <button label="add" onClick="@command('cmd')" />

        <button label="getir eleman sayısı"
            onClick="@command('getirKurumSayisi')" />

        <listitem label="${each}" forEach="${elements}" />

    </window>
    
</zk>

如何填充 listitem？上面的 each 和 elements 是如何定义的？提前致谢。

Answer 1

您似乎正在尝试使用 forEach attribute。虽然这是一个可能的选择，但我建议不要使用它，因为它是 ZK 中较旧（且不太实用）的迭代选项。

您的选择是： ZUTI - forEach element（需要ZK EE）

这是最简单直接的迭代模板选项。集合和模板进去，模板化结果出来。

<forEach items="@load(vm.model)" >
  <label value="@load(each)"/>
</forEach>

它也是为 MVVM 定制设计的，因为您的示例代码正在使用它。您可以将集合作为 VM 的成员传递，并且可以在集合更改时自动通知它以动态重绘 UI 的那部分。

现在，如果您无法访问 ZUTI，第二好的（在 CE 中可用）是 children binding。

本质上是相同的想法，只是它绑定到父级而不是独立的阴影元素。

<vlayout id="load" children="@load(vm.nodes)">
    <template name="children" var="node">
        <label value="@bind(node.name)" style="padding-left:10px"/>
    </template>
</vlayout>

下面对 forEach 属性的解释，以防您真的想使用它：

首先，有一个longer documentation available here。

forEach 属性将“为每个”在 forEach 参数中传递的集合中的对象重复一个组件。此示例使用列表项，但它可以是任何 ZK 组件。（仅供参考，列表项的唯一有效父项是列表框，因此如果您不打算在此页面中使用列表框，则应将其更改为更简单的容器，例如 div 等）

关于“如何填充”部分，参数中传递的值可以是 zul 页面中可用的任何可解析变量。我看到您正在使用 mvvm，因此您已经声明了一个 viewModel。您可以使用那个 viewModel，假设它有一个 getMyBeanList() 方法：

<div forEach=${sampleViewModel.myBeanList}/>

现在对于让它变得笨拙的部分，当你在 collection == [a,b,c] 处声明 <component randomAttribute="${each}" forEach="${collection}"/> 时，你实际声明的是：

<component randomAttribute="${a}"/> 
<component randomAttribute="${b}"/> 
<component randomAttribute="${c}"/>

本质上，您正在创建已声明组件的 N 个副本，值 ${each} 被迭代列表中的相关值替换。

又来了！我强烈建议你看看 ZK 中的其他迭代方法，因为这个方法真的很旧，而且很难用。

绑定数据到zk中的listitem

Binding data to listitem in Zk

binding

zk