先前的文章簡要介紹了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的引用，因此它可以使雙方的數據以及ViewModel中的調用命令方法保持同步，因為View中觸發了事件。

標記

<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 加載和渲染數據 。