zk как сгенерировать компонент внутри zul by для каждого или шаблона, с mvvm? - PullRequest
Новая
       17

zk как сгенерировать компонент внутри zul by для каждого или шаблона, с mvvm?

0 голосов
/ 11 июня 2018

мой босс хочет, чтобы я сделал меню, похожее на начальную загрузку с zk, и я научился делать его из здесь

, теперь я хочу сделать меню вроде этого enter image description here

но я хочу сгенерировать каждую панель с кодом, чтобы она могла настраиваться хе-хе, я использую метод mvvm, уже имею viewmodel, которая работает со списком, но не работает с моим

воткод 

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

вот так это выглядит enter image description here

есть предложения друга?

1 Ответ

0 голосов
/ 11 июня 2018

Кроме listbox, div не имеет модели, и я бы ожидал, что сообщение об ошибке будет честным.

В любом случае, изменив привязку с model на children, вы можете заставить его работать.Вы должны переместить привязку с вашего container на row (шаблон должен быть дочерним по отношению к компоненту с привязкой модель / потомки): 

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

...