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

Question

老板要我用zk做bootstrap这样的菜单，我是从here

学来的

现在我想制作这样的菜单

但是我想用代码生成每个面板，这样它就可以设置了嘿嘿嘿，我使用 mvvm 方法，已经有了可以与列表框一起使用但不能与我的一起使用的视图模型

这是代码

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

这是它的样子

朋友有什么建议吗？

Answer 1

除了listbox，div没有模型，老实说我本以为会出现错误信息。

无论如何，通过将绑定从 model 更改为 children，您可以让它工作。您必须将绑定从 container 移动到 row（模板必须是具有 model/children 绑定的组件的子项）：

<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 中的每个元素生成一个面板和按钮。

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

zk how to generate component within zul by for each or template, with mvvm?

java

mvvm

zk

twitter-bootstrap