extjs6 mvvm_ZK 6中的MVVM初探

extjs6 mvvm

MVVM与MVC

在上一篇文章中，我们已经看到Ajax框架ZK如何采用CSS选择器启发的Controller来在View中连接UI组件并监听它们的事件。 在此ZK MVC模式下， View中的UI组件无需绑定到任何Controller方法或数据对象。 使用选择器模式作为将View状态和事件映射到Controller的灵活性使代码更适应更改。

MVVM在相反方向上实现关注点分离。 在这种模式下，视图模型和绑定器机制代替了控制器。 绑定器将View的请求映射到View-Model中的动作逻辑，并更新双方的任何值（数据），从而允许View-Model独立于任何特定的View。

ZK 6中的MVVM的剖析

以下是ZK 6的MVVM模式的示意图：

以下是图中未传达的一些其他要点：
BindComposer：

  • 实现ZK的标准控制器接口（Composer＆ComposerExt）
  • 默认实现就足够了，不需要修改

视图：

  • 通知活页夹调用哪种方法以及在视图模型上更新哪些属性

视图模型：

  • 只是一个POJO
  • 通过Java注释与活页夹进行通信

MVVM运行中

考虑在不知道确切的UI标记的情况下显示简化清单的任务。 库存是项目的集合，因此我们具有以下对象的表示形式： 

public class Item {private String ID;private String name;private int quantity;private BigDecimal unitPrice;//getters & setters
}

期望可以选择并操作列表中的项目也很有意义。 因此，根据到目前为止的知识和假设，我们可以继续执行视图模型。 

public class InventoryVM {ListModelList<Item> inventory;Item selectedItem;public ListModelList<Item> getInventory(){inventory = new ListModelList<Item>(InventoryDAO.getInventory());return inventory;}public Item getSelectedItem() {return selectedItem;}public void setSelectedItem(Item selectedItem) {this.selectedItem = selectedItem;}}

在这里，我们为View-Model实现提供了一个典型的POJO，以及带有其getter和setter的数据。

查看实施，“采取行动”

现在，假设我们后来了解到View的要求只是一个简单的表格显示：

实现上述UI的可能标记是： 

<window title='Inventory' border='normal' apply='org.zkoss.bind.BindComposer' viewModel='@id('vm') @init('lab.zkoss.mvvm.ctrl.InventoryVM')' ><listbox model='@load(vm.inventory)' width='600px' ><auxhead><auxheader label='Inventory Summary' colspan='5' align='center'/> </auxhead><listhead><listheader width='15%' label='Item ID' sort='auto(ID)'/><listheader width='20%' label='Name' sort='auto(name)'/><listheader width='20%' label='Quantity' sort='auto(quantity)'/><listheader width='20%' label='Unit Price' sort='auto(unitPrice)'/><listheader width='25%' label='Net Value'/></listhead><template name='model' var='item'><listitem><listcell><label value='@load(item.ID)'/></listcell><listcell><label value='@load(item.name)'/></listcell><listcell><label value='@load(item.quantity)'/></listcell><listcell><label value='@load(item.unitPrice)'/></listcell><listcell><label value='@load(item.unitPrice * item.quantity)'/></listcell></listitem> </template></listbox>
</window>

让我们在这里详细说明一下标记。

  • 在第1行，我们将默认的BindComposer应用于Window组件，该组件使Window的所有子组件均受BindComposer的影响。
  • 在下一行，我们指示BindComposer实例化哪个View-Model类，并为View-Model实例提供ID，以便我们对其进行引用。
  • 由于我们正在将数据集合加载到列表框，因此在第3行，我们将View-Model实例的属性“库存”（即Item对象的集合）分配给列表框的属性“模型”。
  • 然后，在第12行，我们在模板组件上使用该模型。 模板根据收到的模型迭代其封闭的组件。 在这种情况下，我们有5个列表项，它们在列表框中组成一行。
  • 在每个Listcell中，我们加载每个对象的属性并在Labels中显示它们。

通过ZK的绑定系统，我们能够访问View-Model实例中的数据，并使用批注将其加载到View中。

查看实施，“采取两次”

假设在以后的开发中，我们同意当前的表格显示在我们的演示文稿中占用了太多空间，并且现在要求我们仅在组合框中选择该项目时才显示该项目的详细信息，如下所示：

尽管表示和行为（仅在用户选择时才显示详细信息）与我们以前的实现有所不同，但是View-Model类不需要大量修改。 由于仅当在组合框中选中某个项目的细节时才会显示它的细节，因此很明显，我们需要处理'onSelect'事件，让我们添加一个新方法doSelect ： 

public class InventoryVM {ListModelList<Item> inventory;Item selectedItem;@NotifyChange('selectedItem')@Commandpublic void doSelect(){ }//getters & setters}

在我们的例子中，用@Command注释的方法使其有资格通过其名称从我们的标记中调用： 

<combobox onSelect='@command('doSelect')' >

注释@NotifyChange（'selectedItem'）允许用户在组合框中选择新项目时自动更新selectedItem属性。 出于我们的目的，方法doSelect不需要其他实现。 完成这些更改后，我们现在可以看到经过稍微修改的View-Model如何与我们的新标记一起工作： 

<window title='Inventory' border='normal' apply='org.zkoss.bind.BindComposer' viewModel='@id('vm') @init('lab.zkoss.mvvm.ctrl.InventoryVM')' width='600px'>...<combobox model='@load(vm.inventory)' selectedItem='@bind(vm.selectedItem)' onSelect='@command('doSelect')' ><template name='model' var='item'><comboitem label='@load(item.ID)'/></template><comboitem label='Test'/></combobox><listbox  visible='@load(not empty vm.selectedItem)' width='240px'><listhead><listheader ></listheader><listheader ></listheader></listhead><listitem><listcell><label value='Item Name: ' /></listcell><listcell><label value='@load(vm.selectedItem.name)' /></listcell></listitem><listitem><listcell><label value='Unit Price: ' /></listcell><listcell><label value='@load(vm.selectedItem.unitPrice)' /></listcell></listitem><listitem><listcell><label value='Units in Stock: ' /></listcell><listcell><label value='@load(vm.selectedItem.quantity)' /></listcell></listitem><listitem><listcell><label value='Net Value: ' /></listcell><listcell><label value='@load(vm.selectedItem.unitPrice * vm.selectedItem.quantity)' /></listcell></listitem></listbox>...
</window>
  • 在第4行，我们将数据收集清单加载到Combobox的model属性，以便它可以使用在第7行声明的Template组件来迭代显示数据模型中每个Item对象的ID。
  • 在第5行，selectedItem属性指向该Item对象列表上最近选择的Item。
  • 在第6行，我们已将onSelect事件映射到View-Model的doSelect方法
  • 在第12行，仅当View-Model中的selectedItem属性不为空时，才使包含项明细的列表框可见（在组合框中选择一个项之前，selectedItem将保持为空）。
  • 然后加载selectedItem的属性以填充列表框。

回顾

在MVVM模式下，我们的View-Model类将其数据和方法公开给活页夹； 没有参考任何特定的View组件。 View实现通过绑定器访问数据或调用事件处理程序。

在本文中，我们仅介绍ZK的MVVM机制的基本原理。 活页夹显然不仅限于从视图模型中加载数据。 除了将数据从View保存到ViewModel之外，我们还可以混合使用View to View-Model通信注入数据转换器和验证器。 MVVM模式也可以与MVC模型结合使用。 也就是说，如果我们愿意的话，我们还可以通过MVC Selector机制连接组件并监听激发的事件。

我们稍后将深入探讨其中一些主题。

参考：我们的JCG合作伙伴 Lance Lu在Tech Dojo博客上对ZK 6中的MVVM进行了初步了解 。


翻译自: https://www.javacodegeeks.com/2012/06/first-look-at-mvvm-in-zk-6.html

extjs6 mvvm

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/354239.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

多线程 调用 axis 报错_java笔记录（三、多线程）

多线程 调用 axis 报错_java笔记录（三、多线程）

1、进程和线程&#xff1a;进程&#xff1a;正在进行的程序。每一个进程执行都有一个执行顺序&#xff0c;该顺序是一个执行路径&#xff0c;或者叫一个控制单元。线程&#xff1a;进程内部的一条执行路径或者一个控制单元。两者的区别&#xff1a;一个进程至少有一个线程进程在…
阅读更多...
使用PropertyPlaceholderConfigurer读取属性文件

使用PropertyPlaceholderConfigurer读取属性文件

1.简介 通常&#xff0c;当我们考虑将多个应用程序部署到生产环境之前在其中部署服务器时&#xff0c;可以在外部属性文件中配置特定于环境的参数 。 它可能是数据库详细信息&#xff0c;对于测试服务器和生产服务器而言&#xff0c;这是不同的。 因此最好选择将数据库配置文件…
阅读更多...
第二天:Swift手势操控弹性按钮

第二天:Swift手势操控弹性按钮

参考链接:https://www.jianshu.com/p/f080ede0f3a8 1 import UIKit2 3 fileprivate let buttonH: CGFloat 2004 5 class ViewController: UIViewController, UIGestureRecognizerDelegate {6 7 IBOutlet weak var segmentControl: UISegmentedControl!8 var randomBtn…
阅读更多...
ionic2 安装与cordova打包

ionic2 安装与cordova打包

1.安装&#xff1a; cnpm install -g cordova ionic ionic start name cd name cnpm install 2、环境配置&#xff1a; http://www.cnblogs.com/changyaoself/p/6544082.html 这里是具体配置。 测试环境&#xff1a; cordova platform list 如下才可以&#xff1a; 3、添加…
阅读更多...
mysql vacuum_PostgreSQL DBA快速入门(四) - 体系架构

mysql vacuum_PostgreSQL DBA快速入门(四) - 体系架构

PostgreSQL在开源关系型数据库市场是最先进的数据库。他的第一个版本在1989年发布&#xff0c;从那时开始&#xff0c;他得到了很多扩展。根据db-enginers上的排名情况&#xff0c;PostgreSQL目前在数据库领域排名第四。 本篇博客&#xff0c;我们来讨论一下PostgreSQL的内部架…
阅读更多...
总结mysql的基础语法_mysql 基础sql语法总结 （二）DML

总结mysql的基础语法_mysql 基础sql语法总结 （二）DML

二、DML(增、删、改)1)插入数据第一种写法&#xff1a;INSERT INTO 表名 (列名1&#xff0c;列名2&#xff0c;&#xff0c;......)VALUES(列值1&#xff0c;列值2&#xff0c;......)第二种写法&#xff1a;INSERT INTO 表名 VALUES(列值1&#xff0c;列值2&#xff0c;......…
阅读更多...
提高团队协作效率

提高团队协作效率

提高团队协作效率 分工合理&#xff0c;责任明确 团队是由个人组成的&#xff0c;团队中的个人往往经历不同、背景不同、性格有差异、水平有高低。在团队形成后、正式开工前&#xff0c;首先应该进行合理分工&#xff0c;要结合每个 人的特点和爱好&#xff0c;充分发挥出每个人…
阅读更多...
Java中Array和ArrayList之间的9个区别

Java中Array和ArrayList之间的9个区别

array和ArrayList都是Java中两个重要的数据结构&#xff0c;在Java程序中经常使用。 即使ArrayList在内部由数组支持&#xff0c;了解Java中的数组和ArrayList之间的差异对于成为一名优秀的Java开发人员也至关重要。 如果您知道相似点和不同点&#xff0c;则可以明智地决定何时…
阅读更多...
vue 在已有的购买列表中（数据库返回的数据）修改商品数量

vue 在已有的购买列表中（数据库返回的数据）修改商品数量

连续加班一个月 连续通宵三天 到最后还是少了一个功能 心碎 简介&#xff1a;一个生成好的商品列表&#xff08;数据库返回的数据&#xff09; 首先拿到我们需要渲染的数组 在data中定义 我是在测试的时候 直接写了两条数据 下面开始点击删除 点击添加是一样的代码 只不过加号…
阅读更多...
python饼状图教程_Python数据可视化:饼状图的实例讲解

python饼状图教程_Python数据可视化:饼状图的实例讲解

使用python实现论文里面的饼状图&#xff1a;原图&#xff1a;python代码实现&#xff1a;# # 饼状图# plot.figure(figsize(8,8))labels [uCanteen, uSupermarket, uDorm, uOthers]sizes [73, 21, 4, 2]colors [red, yellow, blue, green]explode (0.05, 0, 0, 0)patches,…
阅读更多...
小看--单例设计模式

小看--单例设计模式

&#xff08;一&#xff09;单例设计描述 只要了解过设计模式的同学都会知道&#xff1a;单例设计模式&#xff0c;大家都知道单例设计模式是一种创建行的设计模式。既然是创建型&#xff0c;那么先来讲讲&#xff0c;对象的创建的过程吧。 --静态成员&#xff1a;静态成员在程…
阅读更多...
selenium原理python_从python角度解析selenium原理

selenium原理python_从python角度解析selenium原理

1、selenium工作流程2、selenium工作原理(1)客户端和服务端之间实际是通过http协议进行通信&#xff0c;服务端的接口文档可参考&#xff1a;https://github.com/SeleniumHQ/selenium/wiki/JsonWireProtocol#sessionsessionidelement(2)客户端按照服务端接口要求传入请求方式、…
阅读更多...
Jmeter（二）Jmeter目录介绍

Jmeter（二）Jmeter目录介绍

看过许多有关Jmeter的博客&#xff0c;算得上的收获颇丰&#xff1b;不过最牛逼的博客还是“官方文档”&#xff0c;官方文档是ApacheJmeter自己对自己产品的说明&#xff0c;论起对自己产品的理解程度&#xff0c;那肯定是自己嘛。。。因此推荐大家从Jmeter的官方文档开始学习…
阅读更多...
使用Spring Data MongoDB和Spring Boot进行数据聚合

使用Spring Data MongoDB和Spring Boot进行数据聚合

MongoDB聚合框架旨在对文档进行分组并将其转换为聚合结果。 聚合查询包括定义将在管道中执行的几个阶段。 如果您对有关该框架的更深入的细节感兴趣&#xff0c;那么 mongodb docs是一个很好的起点。 这篇文章的重点是编写一个用于查询mongodb的Web应用程序&#xff0c;以便从…
阅读更多...
结合前段修改mysql表数据_jquery实现点击文字可编辑并修改保存至数据库

结合前段修改mysql表数据_jquery实现点击文字可编辑并修改保存至数据库

这个方法网上可以查到很多&#xff0c;但是好多只有点击文字编辑并保持&#xff0c;但是没有完整的代码写怎么保存到数据库。因为本人才疏学浅&#xff0c;费啦好长时间才写好把修改的内容只用一条sql语句保存到数据库&#xff0c;今天在这里和大家分享这是运行图片这是前台页面…
阅读更多...
java 设置两个方法互斥_分享两个操作Java枚举的实用方法

java 设置两个方法互斥_分享两个操作Java枚举的实用方法

1. 前言Java枚举在开发中是非常实用的。今天再来分析几个小技巧并且回答一些同学的的疑问。首先要说明的是我的枚举建立在以下的范式之中&#xff1a;枚举统一接口范式2. 如何把枚举值绑定的下拉列表这种场景非常常见&#xff0c;如果你把状态、类别等属性封装成枚举的结构&…
阅读更多...
Spring管理的交易说明-第2部分（JPA）

Spring管理的交易说明-第2部分（JPA）

在本系列的第一部分中 &#xff0c;我展示了事务如何在普通JDBC中工作 。 然后&#xff0c;我展示了Spring如何管理基于JDBC的事务。 在本系列的第二部分中&#xff0c;我将首先展示事务如何在普通的JPA中工作。 然后展示Spring如何管理基于JPA的事务。 资金转移 为了帮助说明…
阅读更多...
CCC数字钥匙设计【BLE】--车主配对之BLE OOB配对

CCC数字钥匙设计【BLE】--车主配对之BLE OOB配对

本文主要介绍CCC3.0采用BLE进行车主配对时&#xff0c;关于蓝牙OOB配对的内容。 首先&#xff0c;介绍下BLE Pairing的一些基础知识&#xff0c;有一些基本概念。之后&#xff0c;再着重介绍CCC规范定义的BLE OOB配对流程。 1、BLE Pairing基础知识 下面先简单介绍下BLE 5.0协…
阅读更多...
Linux 查看内存状态

Linux 查看内存状态

# 查看系统内存 命令&#xff1a;free 注&#xff1a;默认k单位显示注&#xff1a;-m 以MB注&#xff1a;-g以GB 单位显示total used free shared buffers cached Mem: 497 463 33 0 13 124 -/ buffe…
阅读更多...
Altium Designer导入pcb原件之后都是绿的

Altium Designer导入pcb原件之后都是绿的

转载于:https://www.cnblogs.com/chulin/p/8342041.html
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023