Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hello,
I hope someone can help me with the following problem:
I try to render native html by using the template component of zk. I tried the following, but it does not work, because the children attribute seems to be ignored on native components:
<h:ul children="@load(vm.items) @template('itemTmpl')">
<zk:template name="itemTmpl" var="item">
<h:li>
<zk:label value="@load(item.label)"/>
</h:li>
</zk>
</h:ul>
I also tried to use the special zk component which is not rendered in the client. But this way it also does not work, because zk gives me the log information, that the children attribute is ignored on that component.
<h:ul>
<zk:zk children="@load(vm.items) @template('itemTmpl')">
<zk:template name="itemTmpl" var="item">
<h:li>
<zk:label value="@load(item.label)"/>
</h:li>
</zk>
</zk>
</h:ul>
Is there any other solution to render the required ul/li html construct in zk ? My problem is, tht I must use a predefined css and there is no possibility to adapt the css to use zk components like listbox or grid.
Thanks for any help.
Sven
Sven, i have changed a little the snippet above and it works(!)
The native ul component does not ignore the "children" attribute:
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('snippets.LayoutsVM')"
border="none"
xmlns:n="native"
style="overflow: auto;">
<n:div class="row">
<n:div class="col-sm-7">
<panel border="normal" height="50em" mold="bs" id="membersPanel">
<caption>
<label value="Members"/>
</caption>
<panelchildren style="overflow: auto;">
<n:ul class="list-group" children="@bind(vm.membersModel)" >
<template name="children" var="member">
<n:li class="list-group-item">
<hlayout>
<image src="@load('images/members/'.concat(member.photo))"/>
<vlayout>
<label value="@bind(member.name)" />
<button sclass="btn btn-primary btn-sm" label="Edit" />
</vlayout>
</hlayout>
</n:li>
</template>
</n:ul>
</panelchildren>
</panel>
</n:div>
</n:div>
</window>
I am using ZK 7 on Windows 7 pro with Chrome ver. 33 and Firefox ver 27.
Inspect the ul html element and here is the produced html:
<div id="dVEP8" style="overflow: auto; height: 333px;">
<ul id="dVEP9" class="list-group">
<li class="list-group-item">
<div id="dVEPr1" class="z-hlayout">
If this code is not working for you then maybe a ZK expert should explain us what's wrong... (if something is wrong)
Costas
Hi chillworld,
thank you for your words.
I solved the problem by implementing two custom components to render ul and li elements. Even if it feels a little bit to overact, it solves my problem, because every component derived from HtmlBasedComponent supports the children attribute and the rendering of child components by using templates.
Greeings, Sven
Sven,
maybe the following snippet can help you. I have used this technique to display a ZK 7 page with a "native" bootstrap look & feel and it works fine:
<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('snippets.LayoutsVM')"
border="none"
xmlns:n="native"
style="overflow: auto;">
<n:div class="row">
<n:div class="col-sm-7">
<panel border="normal" height="50em" mold="bs" id="membersPanel">
<caption>
<label value="Members"/>
</caption>
<panelchildren style="overflow: auto;">
<n:ul class="list-group">
<div children="@bind(vm.membersModel)">
<template name="children" var="member">
<n:li class="list-group-item">
<hlayout>
<image src="@load('images/members/'.concat(member.photo))"/>
<vlayout>
<label value="@bind(member.name)" />
<button sclass="btn btn-primary btn-sm" label="Edit" />
</vlayout>
</hlayout>
</n:li>
</template>
</div>
</n:ul>
</panelchildren>
</panel>
</n:div>
</n:div>
</window>
As you can see i am using native bootstrap styling. So, if the style you have been given is bootstrap based then it should work. Is this what you want?
Costas
Hi Costas,
thank you for your solution.
Before I have implemented the custom components to render ul and li element, I have also tried your solution. In my case this does not work, because in the predefined css stylesheet I must use, the styling of the li element is defined as a direct child element of the ul element (ul > li). SO in my case the extra div between the ul and the li element breaks the css.
But with other configurations your solution may be a possible workaround, even if the extra div element breaks the html specification, which does not allow div elements as childrens of ul elements.
Greetings, Sven
hi, i'm having a similar problem. The rendering of native content inside the children template work, but when the model is updated the native content is not rendered anymore, just Zk components. I try with the xhtml namespace, but doesn´t work.
edited: Found the answer (I'm using Zk 7.0.3 CE, native namespace as default)
I've used the xhtml namespace on the tbody to use the children attribute, previously i was using vlayout inside tbody, that worked for initial rendering, but on model update it fails. Now it works properly.
Fragment of code.
<table class="table table-bordered table-striped table-condensed table-hover">
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<x:tbody children="@load(vm.dataList)">
<zk:template name="children" var="item">
<tr>
<td><td>
<tr>
.....
Asked: 2014-03-12 18:34:07 +0800
Seen: 187 times
Last updated: Feb 08 '15