problems with MVC template

asked 2012-09-09 09:51:04 +0800

czynga gravatar image czynga

I Have a question about using template in MVC. In case of Listbox is the template meant only for displaying data or is it like a proper data binding? All examples and documentation I have found are only using components like Label and nothing that can modify data like Textbox for example.
I have tried to simply add setter methods but it didn't work for me. Could you please provide some example?
Or alternatively I'm pasting my example which is NOT working:


<window title="Data Binding in MVC" border="normal" apply="MyComposer">

        <button id="changeButton" label="Change data"></button>

        <listbox id="listbox" model="${$composer.dataModel}">

            <template name="model">
                        <label value="${each.name}"></label>
                        <textbox value="${each.info}"></textbox>



public final class MyComposer extends SelectorComposer<Component> {

    private Button changeButton;

    private Listbox listbox;

    private ListModelList<Person> dataModel = new ListModelList<Person>();

    public ListModelList<Person> getDataModel() {
        return dataModel;

    public void setDataModel(ListModelList<Person> newDataModel) {
        dataModel = newDataModel;

    public void doAfterCompose(Component comp) throws Exception {
        for (int i = 0; i < 10; i++) {
            dataModel.add(new Person());

    @Listen("onClick = #changeButton")
    public void onButtonClick() {
        for (int i = 0; i < dataModel.getSize(); i++) {
            dataModel.getElementAt(i).setName("New Name");
            dataModel.getElementAt(i).setInfo("New Info");

        Clients.showNotification("Data has been changed");

public class Person {

    private String name;

    private String info;

    public String getName() {
        return name;

    public void setName(String newName) {
        name = newName;

    public String getInfo() {
        return info;

    public void setInfo(String newInfo) {
        info = newInfo;

    public Person() {
        name = "Initial Name";
        info = "Initial Info";

Two problems with my example: 1) after clicking on the button data is changed but the components are not updated and 2) after changing Textbox value data is not changes, like there was no binding! Any ideas please?

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2012-09-09 17:10:44 +0800

jj gravatar image jj
638 3

You are not doing binding. Use @ instead of $, which is EL expression, and is only evaluated once during initial rendering.

link publish delete flag offensive edit

answered 2012-09-10 09:22:55 +0800

czynga gravatar image czynga

updated 2012-09-10 09:24:14 +0800

Hi jj thanks for your help but it doesn't work either. First I'm adding "org.zkoss.zkplus.databind.AnnotateDataBindingComposer" to window's apply attribute. Then I'm changing all $ to @. As a result I'm getting empty Listbox with 10 rows, so the size of data model is correct but values are not set in the components, all Labels and Textboxes are empty. Plus the same problems as with $.

link publish delete flag offensive edit

answered 2012-09-10 17:57:14 +0800

jj gravatar image jj
638 3

I haven't got time to try your example, but based on my experience, you need to set the data beforeCompose. Try override beforeComposeChildren(Component) and set your data in there.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2012-09-09 09:51:04 +0800

Seen: 99 times

Last updated: Sep 10 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More