ZK MVVM REFERENCE总结

Annotation Expression
@id(..)	用于标识实例的id,例如视图模型或窗体
@init(..)	用于初始化实例
@load(..)	用于绑定数据和命令以及用于将数据加载到目标的参数
@save(..)	用于绑定数据和命令以及用于保存数据的参数
@bind(..)	用于绑定数据以及用于加载和保存的参数
@ref(..)	用于引用表达式
@converter(..)	用于指定转换器及其参数
@validator(..)	用于指定验证器和参数
@command(..)	用于将事件与参数绑定到命令
@global command(..)	用于将事件与参数绑定到全局命令
@template(..)	用于确定要呈现容器组件的模板

1),ZK中常用的字符

一些el字符在xml属性或zk注释中是非法的，您应该用其他el运算符替换它们。

Tips
=	eq
!=	ne
&&	and
<	lt
<=	le
>	gt
>=	e

例如:

                        <h5 if="${arg.action eq 'create'}">新增</h5>
                        <h5 if="${arg.action ne 'create'}">修改</h5>

2),@init at viewModel Attribute

我们通常使用此注释的第一个地方是将ViewModel分配给ViewModel属性中的组件。
使用时在viewmodel属性中，我们应该在@init中的字符串文字中指定完整的限定类名。

使用如下例如:

<z:div 
           viewModel="@id('vm') @init('com.tuogo.sephora.rb.system.zk.mvvm.SecUserFormVM')">
</z:div>

3),@init at Form Binding

我们还可以使用表单绑定上的初始绑定来填充预定义的值。
是和viewmodel一起使用的

使用如下:

   <z:div 
           viewModel="@id('vm') @init('com.tuogo.sephora.rb.system.zk.mvvm.SecUserFormVM')"
           form="@id('m') @load(vm.domainModel) @save(vm.domainModel,before={'submit'})">
   </z:div>

4),Iteration Variable-迭代变量使用

我们通常使用带有<template>的集合绑定，并指定其“var”属性来命名迭代变量，该变量表示集合的每个条目
如果不在var中指定迭代变量名，var的默认名称是：each。

使用如下

<template name="model" var="item">
...
</template>

5),Implicit Iteration Status Variable-隐式迭代状态变量

zk根据迭代变量的名称自动设置迭代状态的变量名，该变量存储迭代索引。
例如，如果设置var=“item”，则迭代索引将是itemstatus.index：
如果不在var中指定迭代变量名，则隐式迭代状态的默认变量名为：ForEachStatus。

<listbox>
 <template name="model" var="item">
    <listitem >
        <listcell label="@load(itemStatus.index)"/>
    </listitem>
 </template>
</listbox>

6),Binding on Listbox-绑定到列表框

<listbox model="@load(vm.orders)" selectedItem="@bind(vm.selected)" hflex="true" height="200px">
 <listhead>
    <listheader label="Row Index"/>
    <listheader label="Id"/>
    <listheader label="Quantity" align="center" width="80px" />
    <listheader label="Price" align="center" width="80px" />
    <listheader label="Creation Date" align="center" width="100px" />
    <listheader label="Shipping Date" align="center" width="100px" />
</listhead>
<template name="model" var="item">
 <listitem >
    <listcell label="@load(itemStatus.index)"/>
    <listcell label="@load(item.id)"/>
    <listcell label="@load(item.quantity)" style="@load(item.quantity lt 3?'color:red':'')"/>
    <listcell label="@load(item.price)"/>
    <listcell label="@load(item.creationDate)"/>
    <listcell label="@load(item.shippingDate)"/>
</listitem>
 </template>
</listbox>

我们将ListBox的模型绑定到集合类型属性：list<order>
我们将“selectitem”绑定到集合中具有相同对象类型（顺序）的ViewModel属性。每次用户选择列表框中的一项，活页夹将所选对象保存到ViewModel。因此，我们可以得到用户的选择
“var”属性的值：item表示模型的一个对象，因此使用点表示法引用它的属性，例如项目数量。它在集合中的索引可以由itemstatus.index引用。
借助el的强大功能，我们可以在zul上实现简单的表示逻辑。这里我们用红色显示数量。颜色小于3。

7),@ToServerCommand

放置我们要通知由客户机绑定器触发的服务器的命令。只注意我们的命令放入此注释将在服务器上接收。
注意：如果注释的值包含值“*”，则表示接受所有命令以通知服务器。

具体使用参考这篇文章 https://blog.csdn.net/qq_40646143/article/details/85716973

8),@WireVariable

如果成员字段在ViewModel中由@wirevariable注释，则变量（如果存在）将连接到此字段中。
在连接活页夹和ViewModel之前自动执行。有关接线变量的详细信息，请阅读接线变量。

下面是它的使用

public class OrderVM {

    @WireVariable
    private MessageService messageService;

    ...
}

9),@Wire

尽管MVVM模式的设计原则是ViewModel不应该引用UI组件，但是zk仍然提供两种方法来检索ViewModel中的UI组件。但是，我们不建议这种用法，因为它会丢失视图模型的一个重要优势：与视图的松散耦合。

例如页面输入框,后台可以根据id获取到输入到输入框的内容,使用如下

                        <div class="col-lg-10">
                            <z:textbox id="channel"
                                       sclass="form-control"
                                       value="@load(m.channel)"
                                       readonly="true"
                            />
                        </div>

后台获取如下

    @Wire("#channel")
    private Textbox channel;

10),@AfterCompose

@AfterCompose
@AfterCompose(superclass=true)

作用范围:类或者方法上
标记注释以标识将在BindComposer的doAfterCompose()中调用的生命周期方法。
在ViewModel类中，最多只允许有一个@ Aftercompose-annotated注释的方法。如果你设置注释元素父类为true时，首先调用ViewModel的父类的@Aftercompose-annotated注释的方法子类，这个逻辑在父类上重复。如果一个类没@AfterCompose方法，则不会调用任何方法(包括父类的).

例如:

例如，在类层次结构中:a(有@AfterCompose) <- B(有@AfterCompose) <- C(没有@AfterCompose) <- D(有)

@AfterCompose,superclass= true)。D是最后一个子类。

当BindComposer在doAfterCompose()中开始处理D时，它将调用D的@AfterCompose方法。

当BindComposer到达C时，将不调用任何方法。

当BindComposer到达B时，它会调用“then B’s”。

当BindComposer到达A时，它将调用A。

我们还可以在AfterCompose方法的参数上使用与参数相关的注释就像我们在@Init中所做的那样，

请参考语法/视图模型/参数小节。

如果你重写父类的@ aftercomposition注释的方法，例如parent .m1() <- Child.m1()。因为Java的

由于限制，BindComposer仍然调用Child.m1()， Child.m1()将被调用两次。为了避免这种情况，您应该设置

对于child.m1（），superclass=false，并在其中调用super.m1（）。

ZK MVVM REFERENCE总结

1),ZK中常用的字符

2),@init at viewModel Attribute

3),@init at Form Binding

4),Iteration Variable-迭代变量使用

5),Implicit Iteration Status Variable-隐式迭代状态变量

6),Binding on Listbox-绑定到列表框

7),@ToServerCommand

8),@WireVariable

9),@Wire

10),@AfterCompose

猜你喜欢