先前的文章简要介绍了RIA框架ZK，以及其CSS Selector启发的控制器机制如何通过使在控制器类中引用UI组件的任务变得相对灵活来减轻UI更改所带来的一些负担。

然后，我们在上一篇文章中探讨了ZK中的MVVM模式如何允许单个ViewModel提供不同的视图。

这篇文章标志着一系列文章的开始，这些文章将逐步使用ZK从头开始构建一个简单的应用程序。

目的

现在，我们将构建一个简单的库存管理功能，该功能仅限于将数据收集从数据库加载和呈现到表中。

ZK实战功能

• MVVM：加载
• 模板标签

使用MVVM将数据加载并渲染到表中

假设有一个名为“ Item”的对象的集合，并且有一个DataService类，该类负责缓存和与数据库（MongoDB和Morphia）进行通信。

@Entity("items")
public class Item {@Idprivate ObjectId id;private String name;private String model;private int qty;private float price;private Date datemod;// getters & setters

要将数据呈现到ZK中所示的表中，我们需要实现以下部分：

• 一个将用作我们的ViewModel的POJO
• ZK标记文件作为我们的演示文稿

ViewModel类

public class InventoryVM {private List<item> items;public List<item> getItems() throws Exception{items = DataService.getInstance().getAllItems();return items;}}

• 第3行，需要将项目列表声明为VM类的属性
• 第5行，我们需要提供一个getter方法，以便Binder可以检索项目列表。 概括地说，活页夹保留了对UI组件和ViewModel的引用，因此，当View中触发事件时，它可以使双方的数据以及ViewModel中的调用命令方法保持同步。

标记

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('lab.sphota.zk.ctrl.InventoryVM')"><listbox model="@load(vm.items) "><listhead><listheader label="Name" /><listheader label="Model" /><listheader label="Quantity" /><listheader label="Unit Price"/><listheader label="Last Modified" /></listhead><template name="model" var="item" ><listitem><listcell><textbox value="@load(item.name)" inplace="true" /></listcell><listcell><textbox value="@load(item.model)" inplace="true" /></listcell><listcell><spinner value="@load(item.qty)"  inplace="true" /></listcell><listcell><decimalbox value="@load(item.price)" inplace="true" format="#,###.00"/></listcell><listcell label="@load(item.datemod)" /></listitem></template></listbox>
</window>

• 第1行，我们应用ZK的BindComposer的默认实现。 它负责实例化我们的VM实例以及Binder实例。
• 第2行，我们提供了要实例化的ViewModel的完整类名，并为其提供了ID（在本例中为“ vm”），以供将来参考
• 在第3行中，我们将一个数据模型（作为ViewModel实例的属性制作）分配给列表框。
• 在第11行，我们指示Template组件迭代给定的集合。 我们还声明了一个名为“ item”的变量，该变量将迭代处理集合中的每个Item对象。 或者，我们可以省略变量声明，并使用关键字“ each”来引用数据对象（Item）。
• 在第14、17、20、23、26行中，我们检索要在列表框中显示的Item属性。
• 在这里，我们使用Listcell内的输入元素（文本框，微调框，十进制框）来预期将来可编辑表的实现。 如果未选择这些属性，则“ inplace = true”属性会将这些输入元素呈现为常规标签。

结语

ZK Binder是ZK MVVM工作的核心。 它包含对UI组件和ViewModel的引用。 ViewModel类只是一个POJO，我们在其中声明和分配数据模型。 它公开了getter方法，因此Binder可以检索数据并将其绑定到它们各自的带注释的UI组件。 然后，template标签允许我们相对于数据模型迭代地呈现UI组件。 在我们的例子中，使用模板标记通过bean集合迭代地呈现5个Listcell的行，每个单元具有bean属性。

在下一篇文章中，我们将实现“添加”功能，以便我们可以使用MVVM的表单绑定将新条目保存到现有清单中。

参考 ZK开发人员参考

参考： ZK in Action [0]：MVVM –从Tech Dojo博客上的JCG合作伙伴 Lance Lu 加载和渲染数据 。