zk bootstrap display data refresh

asked 2020-04-30 00:11:09 +0800

tinawang
157 ● 2

I try to integrate project with zk bootstrap, is it possible to refresh data in bootstrap element?

I applied a timer, and make sure it works normally. I add a <listbox> and its data updated after the @Command and @NotifyChange. Can above behavior apply in bootstrap element? I try to put the data in <label>, but it missing after data refresh. Use <z:label value="@load(state.type)" /> replace ${state.type}.

<!-- part of stateBoard.zul -->
<forEach items="@bind(vm.states)">
    <n:div sclass="col-12 col-md-6 col-lg-3 p-1">
        <state-box state="@load(each)" icon="@load(each.type)@converter('org.zkoss.admin.converter.TypeIconConverter')" color="@load(each.type)@converter('org.zkoss.admin.converter.TypeColorConverter')" />
    </n:div>
</forEach>
<!-- stateBox.zul -->
<zk xmlns="native" xmlns:z="zul">
    <div class="state-box rounded p-1 ${color}">
        <div class="row">
            <div class="col-8 px-4">
                <h6 class="text-black-50"><z:label value="@load(state.type)" /></h6>
                <h4><z:label value="@load(state.value)" /></h4>
                <z:label sclass="text-success" value="@load(state.ratio)@converter('org.zkoss.admin.converter.PercentageConverter')"/>
            </div>
            <div class="col-4 text-right px-4">
                <h2>
                <i class="${icon} text-black-50 h3"/>
                </h2>
            </div>
        </div>
    </div>
</zk>

https://github.com/zkoss-demo/admin-template/blob/master/src/main/webapp/WEB-INF/template/stateBox.zul