• 将数据加载到表中
• 使用表单绑定保存数据
• 删除条目并以编程方式更新视图

ZK MVVM和ZK MVC实现方式之间的主要区别是，我们不直接在controller（ViewModel）类中访问和操作UI组件。 在本文中，我们将看到如何将某些UI操作委派给客户端代码，以及如何将参数从View传递到ViewModel。

目的

为我们的简单清单CRUD功能构建更新功能。 用户可以在表中就地编辑条目，并可以选择更新或放弃所做的更改。 修改后的条目以红色突出显示。

ZK实战功能

• ZK客户端API
• ZK风格班
• MVVM：将参数从视图传递到ViewModel

分步实施  

在列表框中启用就地编辑，以便我们可以编辑条目：

<listcell><textbox inplace="true" value="@load(each.name)" ...</textbox></listcell>....<listcell><doublebox inplace="true" value="@load(each.price)" ...</textbox></listcell>...

• inplace =” true”呈现输入元素，例如Textbox，但其边框未显示为纯标签； 仅当选择输入元素时才显示边框
• 第2、6行，“每个”指的是数据收集中的每个Item对象

编辑条目后，我们希望为用户提供更新或放弃更改的选项。
仅当用户对列表框条目进行了修改时，“更新”和“放弃”按钮才需要可见。 首先，我们定义JavaScript函数以显示和隐藏“更新”和“放弃”按钮：

<toolbar>...<span id="edit_btns" visible="false" ...><toolbarbutton label="Update" .../><toolbarbutton label="Discard" .../></span>
</toolbar><script type="text/javascript">function hideEditBtns(){jq('$edit_btns').hide();}function showEditBtns(){ jq('$edit_btns').show();}</script>...

• 第2行，我们包装了Update and Discard ，并将可见性设置为false
• 第9、13行中，我们定义了分别隐藏和显示“ 更新”和“ 放弃”按钮的函数
• 第11、15行，我们使用jQuery选择器jq（'$ edit_btns'）检索ID为“ edit_btns”的ZK小部件； 请注意，ZK小部件ID的选择器模式为“ $”，而不是“＃”

修改列表框中的条目后，我们将使“更新/丢弃”按钮可见，并使修改后的值变为红色。 单击“更新”或“放弃”按钮后，我们想再次隐藏按钮

由于这是纯UI交互，因此我们将使用ZK的客户端API：

<style>.inputs { font-weight: 600; }.modified { color: red; }
</style>
...<toolbar xmlns:w="client" >...<span id="edit_btns" visible="false" ...><toolbarbutton label="Update" w:onClick="hideEditBtns()" .../><toolbarbutton label="Discard" w:onClick="hideEditBtns()" .../></span></toolbar><script type="text/javascript">//show hide functionszk.afterMount(function(){jq('.inputs').change(function(){showEditBtns();$(this).addClass('modified');})});</script>...<listcell><doublebox inplace="true" sclass="inputs" value="@load(each.price)" ...</textbox></listcell>...

• 第2行，我们为输入元素（文本框，Intbox，Doublebox，日期框）指定样式类，并将其分配给输入元素的sclass属性，例如。 第26行； sclass为ZK小部件定义样式类
• 在第18〜20行，我们通过匹配它们的sclass名称获得所有输入元素，并分配一个onChange事件处理程序。 更改输入元素中的值后，“更新/丢弃”按钮将变为可见，并且修改后的值将以红色突出显示。
• 第17行，在创建ZK小部件时运行zk.afterMount
• 在第6行，我们指定了客户端名称空间，因此我们可以使用语法“ w：onClick”注册客户端onClick事件侦听器。 请注意，我们仍然可以注册通常在服务器上同时处理的onClick事件侦听器。
• 第9、10行，我们为客户端分配了onClick事件监听器； hideEditBtns函数将被调用以使按钮再次不可见

定义一种将修改后的Item对象存储到集合中的方法，以便如果用户选择这样做，则可以批量更新更改：

public class InventoryVM {private HashSet<Item> itemsToUpdate = new HashSet<item>();...@Commandpublic void addToUpdate(@BindingParam("entry") Item item){itemsToUpdate.add(item);}

• 第6行，我们将此方法注释为命令方法，以便可以从View调用它
• 第7行， @ BindingParam（“ entry”）项目项绑定了一个名为“ entry”的任意命名的参数； 我们预计参数将为Item类型

创建一种方法来更新在视图中对数据模型所做的更改

public class InventoryVM {private List<Item> items;private HashSet<Item> itemsToUpdate = new HashSet<item>();...@NotifyChange("items")@Commandpublic void updateItems() throws Exception{for (Item i : itemsToUpdate){i.setDatemod(new Date());DataService.getInstance().updateItem(i);}itemsToUpdate.clear();items = getItems();}

对列表框条目进行修改后，请调用addToUpdate方法并将经过编辑的Item对象传递给该方法，该对象又被保存到itemsToUpdate集合

<listitem><listcell><doublebox value="@load(each.price) @save(each.name, before='updateItems')"  onChange="@command('addToUpdate',entry=each)" /></listcell>...
</listitem>

• @save（each.name，before ='updateItems'）确保除非调用updateItems（即，当用户单击“更新”按钮时），否则不保存修改后的值。

最后，当用户单击更新时，我们调用updateItems方法来更新对数据模型的更改。 如果单击“丢弃”，我们将调用getItems刷新列表框，而不进行任何更改

...<toolbarbutton label="Update" onClick="@command('updateItems')" .../><toolbarbutton label="Discard" onClick="@command('getItems')" .../>...

简而言之

• 在MVVM模式下，我们努力使ViewModel代码独立于任何View组件
• 由于我们没有直接引用ViewModel代码中的UI组件，因此可以使用ZK的客户端API将UI操作（在示例代码中，显示/隐藏，样式更改）代码委托给客户端
• 我们可以在ZK客户端使用jQuery选择器和API
• 我们可以使用@BindingParam轻松地将参数从View传递到ViewModel

接下来，在处理MVVM验证器和转换器之前，我们将详细介绍ZK样式。  

ViewModel（动作中的ZK [0]〜[3]）：

public class InventoryVM {private List<Item> items;private Item newItem;private Item selected;private HashSet<Item> itemsToUpdate = new HashSet<Item>();public InventoryVM(){}//CREATE@NotifyChange("newItem")@Commandpublic void createNewItem(){newItem = new Item("", "",0, 0,new Date());}@NotifyChange({"newItem","items"})@Commandpublic void saveItem() throws Exception{DataService.getInstance().saveItem(newItem);newItem = null;items = getItems();}@NotifyChange("newItem")@Commandpublic void cancelSave() throws Exception{newItem = null;}//READ@NotifyChange("items")@Commandpublic List<Item> getItems() throws Exception{items = DataService.getInstance().getAllItems();for (Item j : items){System.out.println(j.getModel());}Clients.evalJavaScript("zk.afterMount(function(){jq('.inputs').removeClass('modified').change(function(){$(this).addClass('modified');showEditBtns();})});"); //how does afterMount work in this case?return items;}//UPDATE@NotifyChange("items")@Commandpublic void updateItems() throws Exception{for (Item i : itemsToUpdate){i.setDatemod(new Date());DataService.getInstance().updateItem(i);}itemsToUpdate.clear();items = getItems();}@Commandpublic void addToUpdate(@BindingParam("entry") Item item){itemsToUpdate.add(item);}//DELETE@Commandpublic void deleteItem() throws Exception{if (selected != null){String str = "The item with name \""+selected.getName()+"\" and model \""+selected.getModel()+"\" will be deleted.";Messagebox.show(str,"Confirm Deletion", Messagebox.OK|Messagebox.CANCEL, Messagebox.QUESTION, new EventListener<Event>(){@Overridepublic void onEvent(Event event) throws Exception {if (event.getName().equals("onOK")){DataService.getInstance().deleteItem(selected);items = getItems();BindUtils.postNotifyChange(null, null, InventoryVM.this, "items");}}});} else {Messagebox.show("No Item was Selected");} }public Item getNewItem() {return newItem;}public void setNewItem(Item newItem) {this.newItem = newItem;}public Item getselected() {return selected;}public void setselected(Item selected) {this.selected = selected;}
}

视图（ZK处于活动状态[0]〜[3]）：

<zk><style>.z-toolbarbutton-cnt { font-size: 17px;} .edit-btns {border: 2pxsolid #7EAAC6; padding: 6px 4px 10px 4px; border-radius: 6px;}.inputs { font-weight: 600; } .modified { color: red; }</style><script type="text/javascript">function hideEditBtns(){ jq('$edit_btns').hide(); }function showEditBtns(){ jq('$edit_btns').show(); }zk.afterMount(function(){ jq('.inputs').change(function(){$(this).addClass('modified'); showEditBtns(); }) });</script><window apply="org.zkoss.bind.BindComposer"viewModel="@id('vm') @init('lab.sphota.zk.ctrl.InventoryVM')"xmlns:w="client"><toolbar width="100%"><toolbarbutton label="Add"onClick="@command('createNewItem')" /><toolbarbutton label="Delete"onClick="@command('deleteItem')"disabled="@load(empty vm.selected)" /><span id="edit_btns" sclass="edit-btns" visible="false"><toolbarbutton label="Update" onClick="@command('updateItems')" w:onClick="hideEditBtns()"/><toolbarbutton label="Discard"onClick="@command('getItems')" w:onClick="hideEditBtns()" /></span></toolbar><groupbox mold="3d"form="@id('itm') @load(vm.newItem) @save(vm.newItem, before='saveItem')"visible="@load(not empty vm.newItem)"><caption label="New Item"></caption><grid width="50%"><rows><row><label value="Item Name" width="100px"></label><textbox value="@bind(itm.name)" /></row><row><label value="Model" width="100px"></label><textbox value="@bind(itm.model)" /></row><row><label value="Unit Price" width="100px"></label><decimalbox value="@bind(itm.price)"format="#,###.00" constraint="no empty, no negative" /></row><row><label value="Quantity" width="100px"></label><spinner value="@bind(itm.qty)"constraint="no empty,min 0 max 999: Quantity Must be Greater Than Zero" /></row><row><cell colspan="2" align="center"><button width="80px" label="Save" mold="trendy"onClick="@command('saveItem')"  /><button width="80px" label="Cancel" mold="trendy"onClick="@command('cancelSave')" /></cell></row></rows></grid></groupbox><listbox selectedItem="@bind(vm.selected)" model="@load(vm.items) "><listhead><listheader label="Name" sort="auto" hflex="2" /><listheader label="Model" sort="auto" hflex="1" /><listheader label="Quantity" sort="auto" hflex="1" /><listheader label="Unit Price" sort="auto" hflex="1" /><listheader label="Last Modified" sort="auto" hflex="2" /></listhead><template name="model"><listitem><listcell><textbox inplace="true" width="110px" sclass="inputs"value="@load(each.name) @save(each.name, before='updateItems')"onChange="@command('addToUpdate',entry=each)"></textbox></listcell><listcell><textbox inplace="true" width="110px" sclass="inputs" value="@load(each.model) @save(each.model, before='updateItems')"onChange="@command('addToUpdate',entry=each)" /></listcell><listcell><intbox inplace="true" sclass="inputs" value="@load(each.qty) @save(each.qty, before='updateItems')"onChange="@command('addToUpdate',entry=each)" /></listcell><listcell><doublebox inplace="true" sclass="inputs" format="###,###.00" value="@load(each.price) @save(each.price, before='updateItems')"onChange="@command('addToUpdate',entry=each)" /></listcell><listcell label="@load(each.datemod)" /></listitem></template></listbox></window>
</zk>

• ZK客户端参考
• ZK开发人员参考：@BindingParam

参考： ZK in Action [3]：MVVM –与我们的JCG合作伙伴 Lance Lu的ZK Client API一起在Tech Dojo博客上工作。