Introduction

In ZK 8, we enhance the performance of MVVM and had it made more powerful. One of the most important features is the enhancement of children binding. Originally, children binding allows us to bind child components to a collection, in which we can create a group of similar components dynamically upon the collection with <template> where you can easily design a template-based layout.

Now, children binding supports ListModel ! This means you can now separate View and Model by implementing ListModel, which is used to provide data. Also, when you add/update/remove the data in the model, the corresponding components in children binding will be rerendered at the same time. (To know more about ListModel, you can see here.)

DEMO

This DEMO shows the difference between using List and ListModel in children binding.
(When new components are rendered, the color of the border will change.)


<a href="http://adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /></a>

When using List in children binding, to update data you have to use @NotifyChange to notify the binder any property changes, and the whole rendered components in children binding will be rerendered at the same time.

index.zul

<vlayout children="@load(vm.list)">
  <template name="children">
  ...
  </template>
</vlayout>

ProductListVM.java

@Command
@NotifyChange("list")
public void add_list() {
  Product newProduct = new Product(++count, "Microwave oven", 999);
  list.add(newProduct);
}

Alternatively, if you use ListModel in children binding, you can simply control the model, and only the corresponding rendering components will be rerendered.

index.zul

<vlayout children="@load(vm.model)">
  <template name="children">
  ...
  </template>
</vlayout>

ProductListVM.java

private ListModelList model = new ListModelList();
...
@Command
public void add_model() {
  Product newProduct = new Product(++count, "Microwave oven", 999);
  model.add(newProduct);
}

(There are some default implementations of ListModel, such as ListModelListListModelMapListModelSet and ListModelArray.)
Instead of rendering the whole children component, using ListModel in children binding is faster and easier to manage data.
Hope you’re all excited about this feature of ZK8 !

Download

The demo code can be found in github.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

One Response to “ZK8: More powerful data binding in MVVM – Chilldren binding support ListModel”

  1. Costas says:

    Great feature!

Leave a Reply