<zk>
<div viewModel="@id('vm')@init('pkg$.ListboxSortVm')">
<button label="update model" onClick="@command('updateModel')" />
<listbox id="box" width="100%" model="@init(vm.model)" onHeadSort="@command('sortModel', asc=event.getOrigin().getAscending(), data=event.getData())">
<listhead>
<listheader label="Author" sort="auto(str1)" forward="onSort=box.onHeadSort(str1)" />
<listheader label="Title" sort="auto(str2) forward="onSort=box.onHeadSort(str2)" />
<listheader label="Publisher" sort="auto(str3) forward="onSort=box.onHeadSort(str3)" />
<listheader label="Hardcover" sort="auto(str4) forward="onSort=box.onHeadSort(str4)" />
</listhead>
<template name="model">
<listitem>
<listcell label="${each.str1}" />
<listcell label="${each.str2}" />
<listcell label="${each.str3}" />
<listcell label="${each.str4}" />
</listitem>
</template>
</listbox>
</div>
</zk>