在前兩篇文章中，我們使用ZK的MVVM功能來：

• 將數據加載到表中
• 使用表單綁定保存數據

我們已經看到，用注解@NotifyChange（）裝飾方法時，在執行完成后，將向Binder通知VM屬性的更改，以便Binder可以相應地更新相應的UI。
在這篇文章中，雖然我們在庫存中實現了項目刪除的功能，但我們將看到如何在運行時以編程方式更新UI組件。

目的

為我們的簡單清單CRUD功能構建刪除功能。

ZK功能實戰

• MVVM：BindUtils

使用MVVM BindUtils實施刪除我們將：

• 為刪除按鈕添加標記，并為其分配onClick事件處理程序
• 在VM中實施命令方法' deleteItem（） '

標記

<window apply='org.zkoss.bind.BindComposer' viewModel='@id('vm') @init('...InventoryVM')'><toolbar  width='100%'><toolbarbutton label='Add' onClick='@command('createNewItem')' /><toolbarbutton label='Delete' onClick='@command('deleteItem')' disabled='@load(empty vm.selected)'/></toolbar>

• 第5行，將命令方法' deleteItem '分配給刪除按鈕的onClick處理程序
• 第5行，' disabled ='@（empty vm.selected）' '確保僅當選擇了表中的一個條目后，刪除按鈕才起作用

ViewModel類

public class InventoryVM {private Item selected;private List<Item> items;...@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');}); } ...}...
}

• 第7行，我們用@Command裝飾了deleteItem方法，因此可以將其作為onClick事件處理程序連接到我們添加的標記中：
  <toolbarbutton label ='刪除'onClick ='@ command（'deleteItem'）'/> ;
• 第9行，只有選擇了一個項目，我們才繼續刪除過程。
• 第16行，我們顯示一個消息框，提示用戶確認所選項目的刪除。
• 第20行，如果用戶單擊“確定”，我們的程序將繼續刪除所選項目。
• 第23行，我們調用BindUtils.postNotifyChange（String queueName ，String queueScope ，Object bean ，String property ）更新清單表。 通過為參數queueScope提供空值，將使用默認的桌面隊列范圍。 這樣給出第三個和第四個參數，因為我們想通知Binder InventoryVM實例中的屬性“ items”已更改。 然后，活頁夾將更新UI（刪除庫存表中的物料條目）。

包起來

@NotifyChange注釋使我們可以通過ZK MVVM的Binder更新UI，以反映對ViewModel屬性所做的更改。 當帶注釋的方法完成執行時，將觸發該通知。 在我們的實現中，我們將匿名事件偵聽器類附加到Messagebox。 在這種情況下，在執行deleteItem之后，注釋@NotifyChange（'items'）將在事件處理完成之前錯誤地提醒Binder。 通過編程方式將ViewModel中的狀態更改反映到UI，可以方便地解決此特定問題。

接下來，使用MVVM編輯條目。

參考： ZK in Action [2]：MVVM –通過Tech Dojo博客上的JCG合作伙伴 Lance Lu以編程方式更新視圖 。