populate list using grid zk

Inex.zul

<?page title="Card Holder" contentType="text/html;charset=UTF-8"?>
<zk>

<script type="text/javascript">

    function changeCardStyle(componentId) {
        $(componentId).addClass("v-card");
    }

</script>

<style>
    .v-card {
        border:2px solid;
        height: 70px;
    }
</style>

<window title="Card Holder" border="normal" width="100%" height="100%"
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('com.swain.IndexVM')"
        xmlns:n="native">

    <grid model="@load(vm.cards)">
        <columns>
            <column label="Cards" hflex="max"></column>
            <column hflex="min"></column>
        </columns>
        <template name="model" var="card">
            <row>
              <cell>
                <label value="@load(card)" />
              </cell>
              <cell>
                <button label="Change" onClick="@command('change-style', row=self.parent.parent)" />
              </cell>
            </row>
        </template>
    </grid>
</window>
</zk>

Java:

package com.swain;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

public class IndexVM{
 @Command("change-style")
 public void onChangeStyle(@BindingParam("row") Component row) {

   String componentId = "#" + row.getUuid();
   Clients.evalJavaScript("changeCardStyle('" + componentId + "')");
 }

 public ListModel<String> getCards() {
   List<String> data = new ArrayList<String>();
   data.add("Costas");
   data.add("Nick");
   data.add("Peter");
   data.add("Paul");
   data.add("Mario");
   data.add("John");
   data.add("Jack");
   return new ListModelList<String>(data);
 }
}