先前的文章簡(jiǎn)要介紹了RIA框架ZK，以及它CSS Selector啟發(fā)式控制器機(jī)制如何通過(guò)使在控制器類(lèi)中引用UI組件的任務(wù)變得相對(duì)靈活來(lái)減輕UI更改所帶來(lái)的一些負(fù)擔(dān)。

然后，我們?cè)谏弦黄恼轮刑接懥薢K中的MVVM模式如何允許單個(gè)ViewModel提供不同的視圖。

這篇文章標(biāo)志著一系列文章的開(kāi)始，這些文章將逐步使用ZK從頭開(kāi)始構(gòu)建一個(gè)簡(jiǎn)單的應(yīng)用程序。

目的

現(xiàn)在，我們將構(gòu)建一個(gè)簡(jiǎn)單的庫(kù)存管理功能，該功能僅限于將數(shù)據(jù)收集從數(shù)據(jù)庫(kù)加載和呈現(xiàn)到表中。

ZK實(shí)戰(zhàn)功能

• MVVM：加載
• 模板標(biāo)簽

使用MVVM將數(shù)據(jù)加載并呈現(xiàn)到表中

假設(shè)有一個(gè)名為“ Item”的對(duì)象的集合，并且有一個(gè)DataService類(lèi)，該類(lèi)負(fù)責(zé)緩存和與數(shù)據(jù)庫(kù)（MongoDB和Morphia）進(jìn)行通信。

@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

要將數(shù)據(jù)呈現(xiàn)到ZK中所示的表中，我們需要實(shí)現(xiàn)以下部分：

• 一個(gè)將用作我們的ViewModel的POJO
• ZK標(biāo)記文件作為我們的演示文稿

ViewModel類(lèi)

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

• 第3行，需要將項(xiàng)目列表聲明為VM類(lèi)的屬性
• 第5行，我們需要提供一種getter方法，以便Binder可以檢索項(xiàng)目列表。 概括地說(shuō)，活頁(yè)夾保留了對(duì)UI組件和ViewModel的引用，因此它可以使雙方的數(shù)據(jù)以及ViewModel中的調(diào)用命令方法保持同步，因?yàn)閂iew中觸發(fā)了事件。

標(biāo)記

<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行，我們應(yīng)用ZK的BindComposer的默認(rèn)實(shí)現(xiàn)。 它負(fù)責(zé)實(shí)例化我們的VM實(shí)例以及Binder實(shí)例。
• 第2行，我們提供了要實(shí)例化的ViewModel的完整類(lèi)名，并為其提供了ID（在本例中為“ vm”），以供將來(lái)參考
• 在第3行中，我們將一個(gè)數(shù)據(jù)模型（作為ViewModel實(shí)例的屬性制作）分配給列表框。
• 在第11行，我們指示Template組件迭代給定的集合。 我們還聲明了一個(gè)名為“ item”的變量，該變量將迭代處理集合中的每個(gè)Item對(duì)象。 或者，我們可以省略變量聲明，并使用關(guān)鍵字“ each”來(lái)引用數(shù)據(jù)對(duì)象（Item）。
• 在第14、17、20、23、26行中，我們檢索要在列表框中顯示的Item屬性。
• 在這里，我們使用Listcell內(nèi)的輸入元素（文本框，微調(diào)框，十進(jìn)制框）來(lái)預(yù)期將來(lái)可編輯表的實(shí)現(xiàn)。 如果未選擇這些屬性，則“ inplace = true”屬性會(huì)將這些輸入元素呈現(xiàn)為常規(guī)標(biāo)簽。

包起來(lái)

ZK Binder是ZK MVVM工作的核心。 它包含對(duì)UI組件和ViewModel的引用。 ViewModel類(lèi)只是一個(gè)POJO，我們?cè)谄渲新暶骱头峙鋽?shù)據(jù)模型。 它公開(kāi)了getter方法，因此Binder可以檢索數(shù)據(jù)并將其綁定到各自的帶注釋的UI組件。 然后，template標(biāo)簽允許我們相對(duì)于數(shù)據(jù)模型迭代地呈現(xiàn)UI組件。 在我們的例子中，使用模板標(biāo)記通過(guò)bean集合迭代地呈現(xiàn)5個(gè)Listcell的行，每個(gè)單元具有bean屬性。

在下一篇文章中，我們將實(shí)現(xiàn)“添加”功能，以便我們可以使用MVVM的表單綁定將新條目保存到現(xiàn)有清單中。

參考 ZK開(kāi)發(fā)人員參考

參考： ZK in Action [0]：MVVM –在Tech Dojo博客上從JCG合作伙伴 Lance Lu 加載和渲染數(shù)據(jù) 。

翻譯自: https://www.javacodegeeks.com/2012/07/zk-in-action-mvvm-load-and-render-data.html

總結(jié)

以上是生活随笔為你收集整理的ZK的实际应用：MVVM –加载和渲染数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。