概述

首先,我们来了解一个什么是MVVM?
1
MVVM是Model-View-ViewModel的简写。首先,view是对viewmodel中数据的一个可视化的显示,view观察viewmodel,操作view时会发送命令到viewmodel,并且当viewmodel变化时更新;其次,viewmodel是model对外暴露的数据视图和操作。因此,view和model是不知道彼此存在的。

Knockoutjs是一个名正言顺的MVVM框架,通过简洁易读的data-bind语法,将DOM元素与viewmodel关联起来。当模型(viewmodel)状态更新时,自动更新UI界面(view)。viewmodel是model和view的桥梁,是一个纯粹的js对象。

WeX5是基于Knockoutjs实现MVVM模式的,我们来看看,在WeX5中,如何与MVVM对应:
2
如上图所示,MVVM在WeX5中分别如下:
● view(V):.w文件,包含布局组件、显示组件和编辑组件等各种展现组件,构成用户交互界面;它通过“bind-”绑定表达式与数据和界面逻辑进行关联;
● viewmodel(VM):.js文件和Data,表示页面数据模型和界面逻辑;其中Data是.w页面中的Data组件,在Data组件上可以定义数据规则表达式;
● model(M):服务端(Baas),表示后台数据模型和操作;
数据绑定
WeX5在数据和view上,都提供了大量可通过表达式定义的动态属性。当表达式依赖的数据项改变时,表达式会自动重新计算,从而更展现的显示和行为。我们把页面上的这种由数据驱动界面动态交互的能力称之为“数据绑定”。
在数据和view两个层面,表达式属性的作用有所不同,我们把表达式分为两类:
● 数据规则表达式:用于定义数据相关的规则,例如只读规则、必填规则、计算规则和约束规则等等;
● 绑定表达式:用于定义展现组件上的数据、状态、样式等稳中有各种动态属性。
数据规则表达式和绑定表达式都采用js表达式语法,但不同的表达式有不同的作用和描述规则,接下来我们将详细介绍这两种表达式。
(注:本节所用到的案例参见WeX5自带的“数据绑定”案例,即/UI2/demo/misc/bind/index.w。启动WeX5运行平台,在chrome浏览器中访问http://localhost:8080/x5/UI2/demo/misc/bind/index.w即可运行)

应用构成

WeX5应用的前端由若干个页面构成,这些页面可以按业务的需要,组织到多个目录中。每个页面由以下三个文件组成:
● w文件:页面片段,定义页面的展现,由若干组件构成;它是MVVM的V;
● w文件同名的js文件:定义页面逻辑,以js模块化的方式定义一个js类;这个js类的实例是MVVM的VM;
● w文件同名的css文件:定义页面的样式,只作用于当前w文件中的界面元素。