How can we change Listcell position Dynamically in Listbox? [closed]

if (position1)
    listbox.setTemplate("model",new CustomTemplate1());
if (position2)
    listbox.setTemplate("model",new CustomTemplate2());

test.zul
<zk>
	<div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('demo.TestVM')">
		<listbox id="lbx" model="@load(vm.items) @template(vm.position eq 'default' ? 'model' : 'model2')">
			<template name="model" var="item">
				<listitem>
					<listcell label="@load(item.name)" />
					<listcell label="@load(item.description)" />
				</listitem>
			</template>
			<template name="model2" var="item">
				<listitem>
					<listcell label="@load(item.description)" />
					<listcell label="@load(item.name)" />
				</listitem>
			</template>
		</listbox>
		<button label="Change Listcell Position" onClick="@command('changePosition')" />
	</div>
</zk>

public class TestVM {

	private List<Item> items = new ArrayList<Item>();
	private String position = "default";
	
	public TestVM() {
		items.add(new Item("Name 1", "Description 1"));
		items.add(new Item("Name 2", "Description 2"));
		items.add(new Item("Name 3", "Description 3"));
		items.add(new Item("Name 4", "Description 4"));
		items.add(new Item("Name 5", "Description 5"));
	}

	public List<Item> getItems() {
		return items;
	}
	
	public String getPosition() {
		return position;
	}
	
	@Command @NotifyChange("position")
	public void changePosition() {
		position = "pos2";
	}
	
	public class Item {
		private String name;
		private String description;
		
		public Item(String name, String description) {
			this.name = name;
			this.description = description;
		}
		public String getName(){return name;}
		public String getDescription(){return description;}
	}
}