java - zk 如何使用 mvvm 为每个或模板生成 zul 中的组件？

Question

我的老板想让我用zk制作类似bootstrap的菜单，我从here学会了制作它。

现在我想做这样的菜单

但我想用代码生成每个面板，以便它可以设置呵呵，我使用 mvvm 方法，已经有可以与列表框配合使用的 View 模型，但不适用于我的

这是代码

<zk id="index" xmlns:n="native" >
    <div class="page-header text-center">
        <n:h1>ZK Bootstrap Evshop </n:h1>
        <n:h5>This version is newborn, say something bad about it and i will slap you </n:h5>
    </div>

    <div class="container" viewModel="@id('vm') @init('controller.MenuViewModel')">
        <navbar mold="bs-tabs" id="mainTabs">
            <navitem label="Home" selected="true" />
            <navitem label="ktek"/>
        </navbar>

<!--        normal listbox work really well-->
        <listbox id="carListbox" height="160px" model="@load(vm.menuList)" emptyMessage="No car found in the result" >
            <listhead>
                <listheader label="Model" />
                <listheader label="Make" />
                <listheader label="Price" width="20%"/>
            </listhead>
            <template name="model">
                <listitem>
                    <listcell label="@init(each.title)"></listcell>
                    <listcell label="@init(each.icon)" ></listcell>
                    <listcell>$<label value="@init(each.id)" />
                    </listcell>
                </listitem>
            </template>
        </listbox>

<!--        container with model doesnt even showing anything-->
        <div class="container" model="@load(vm.menuList)">
            <div class="row" id="main1">
                <template name="model">
                    <div class="col-sm-6 col-lg-3">
                        <panel title="@init(each.title)">
                            <panelchildren>
                                <n:img src="@init(each.icon)"  alt="zk logo" width="50px" height="50px"></n:img>
                                <button id="@init(each.id)" width="75%">Go</button>
                            </panelchildren>
                        </panel>
                    </div>    
                </template>
            </div>
        </div>

<!--        trying to use for each, still not good enough-->
        <zk forEach="@load(vm.menuList)">
            <div class="row" id="main">
                <div class="col-sm-6 col-lg-3">
                    <panel title="@init(each.title)">
                        <panelchildren>
                            <n:img src="@init(each.icon)"  alt="zk logo" width="50px" height="50px"></n:img>
                            <button id="@init(each.id)" width="75%">Go</button>
                        </panelchildren>
                    </panel>
                </div> 
            </div>
        </zk>

    </div> 
</zk>

这就是它的样子

friend 有什么建议吗？

Answer 1

除了 listbox 之外，div 没有模型，说实话，我本以为会出现错误消息。

无论如何，通过将绑定(bind)从 model 更改为 children你可以让它工作。您必须将绑定(bind)从容器移动到行(模板必须是具有模型/子项绑定(bind)的组件的子项):

<div class="container">
    <div class="row" id="main1" children="@load(vm.menuList)">
        <template name="children">
            <div class="col-sm-6 col-lg-3">
                <panel title="@init(each.title)">
                    <panelchildren>
                        <button id="@init(each.id)" width="75%">Go</button>
                    </panelchildren>
                </panel>
            </div>    
        </template>
    </div>
</div>

这将为 menuList 中的每个元素生成一个面板和按钮。