ZK的实际应用：MVVM –以编程方式更新视图

在前两篇文章中，我们使用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;
    ...

    @Command
    public 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>(){
                @Override
                public 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以编程方式更新视图 。

翻译自: https://www.javacodegeeks.com/2012/07/zk-in-action-mvvm-update-view.html