zk如何使用mvvm为每个或模板在zul中生成组件?

我的老板想让我用zk制作类似bootstrap的菜单,我已经从 这里学会了制作。

现在我想制作这样的菜单

但是我想用代码生成每个面板,所以它可以设置,我使用mvvm方法,已经有了viewModel,可以使用ListBox,但不能使用我的。

这是密码

<zk id=“index”xmlns:n=“native”>
<DIV class=“页首文本中心”>
<n:h1>zk bootstrap evshop</n:h1>
<n:h5>这个版本是新生的,说些不好的话,我会扇你一巴掌</n:h5>
</DIV>

<div class=“container”viewModel=“@id('vm')@init('controller.menuView Model')”>
<navbar mold=“bs tabs”id=“maintabs”>
<navitem label=“home”selected=“true”/>
<navitem label=“ktek”/>
</navbar>

<!--正常的列表框工作得很好-->
<listbox id=“carlistbox”height=“160px”model=“@load(vm.menulist)”emptymessage=“在结果中找不到汽车”>
<列表头>
<listHeader label=“模型”/>
<listHeader label=“make”/>
<listHeader label=“price”width=“20%”/>
</listhead>
<template name=“model”>
<列表项>
<listcell label=“@init(each.title)”>/listcell>
<listcell label=“@init(each.icon)”>/listcell>
<listcell>$<label value=“@init(each.id)”/>
</listcell>
</listem>
</template>
</listbox>

<!--带有模型的容器甚至不显示任何内容-->
<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%”>开始</button>
</panelchildren>
</panel>
</DIV>
</template>
</DIV>
</DIV>

<!--尝试为每个人使用,但仍然不够好-->
<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%”>开始</button>
</panelchildren>
</panel>
</DIV>
</DIV>
</zk>

</DIV>
</zk>
这就是它的样子


有什么建议吗朋友?

现在我想做这样的菜单


但是我想用代码生成每个面板,所以它可以设置,我使用mvvm方法,已经有了viewModel,可以使用ListBox,但不能使用我的。

这是密码

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


这就是它的样子


有什么建议吗朋友?