数据核心绑定.pdf

WeX5 & BeX5 页面框架核心之数据绑定 目录 1、引言 ：《外卖》案例的代码不完整吗 ？？？ 2、概述 o 2.1、WeX5页面组成 o 2.2、数据绑定 3、规则表达式 o 3.1、数据规则 o 3.2、环境变量 o 3.3、上下文对象 o 3.4、ref、val和 label的区别 4、绑定表达式 o 4.1、概述 o 4.2、绑定表达式的环境变量和上下文对象 o 4.3、特殊的 ref 绑定(bind-ref、bind-labelRef、bind-extRef) o 4.4、数据相关的绑定表达式(bind-value、bind-checked、bind-text) o 4.5、状态相关的绑定表达式(bind-visible、bind-enabled、bind-disabled、bind-hasFocus) o 4.6、样式相关的绑定表达式(bind-style、bind-css) o 4.7、其他 HTML属性的绑定表达式(bind-attr-src、bind-attr-href、bind-attr-title、bind-attr-xxx) o 4.8、HTML片段相关的绑定表达式(bind-if、binf-ifnot、bind-with、bind-foreach) o 4.9、其他绑定表达式(bind-html、bind-uniqueName) 5、List 组件的过滤表达式 6、表达式中使用 JS对象和函数 附录、表达式环境变量及上下文对象一览表 1、引言 ：《外卖》案例的代码不完整吗 ？？？ WeX5 自带了一个经典的 《外卖》案例 ，实现了常见的购物车需求。但是初学者在第一次去看它的源码时 ，会发现它的JS代码是 “不 完整的”。JS代码中只有一些核心的与数据操作相关的代码片段 ，很多页面上的动态计算和显示都找不到相应的代码实现。 那么这些动态计算和显示是如何实现的呢 ？不需要写代码吗 ？仔细观察相关组件的属性定义 ，会发现它们原来都是通过一些支 持表达式定义的属性来实现的。这就是现在要给大家介绍的WeX5的数据绑定了。数据绑定让很多原本需要大量的事件监控和 代码编程才能完成的数据运算、规则校验和动态显示等页面逻辑 ，现在通过简单的表达式定义就可以轻松实现了。  购物车中菜品增加后 ，下面的购物车按钮会自动变成黄色 ，并显示项目数  购物车中菜品数量改变时 ，合计金额会自动计算  购物车中所有菜品数量为零时 ，下单按钮会自动禁用 2、概述 2.1、WeX5页面组成 首先 ，我们来看一下 WeX5的页面组成。WeX5的页面主要由数据 （Data ）、视图 （View ）和代码 （Code ）三个部分组成 ， 体现了数据与视图分离、页面描述与代码逻辑分离的核心设计思想。  数据部分包含若干个数据组件 ，是整个页面的数据核心 ；  视图部分包含布局组件、显示组件和编辑组件等各种视图组件 ，构成用户交互界面 ；  代码部分包含当前页面的JS代码 ，WeX5页面采用基于组件对象的事件驱动程模式 ，数据和视图部分的每个组件对象 都提供了大量的方法和事件 ，让开发者可以编程实现任意复杂的个性化逻辑。 2.2、数据绑定 WeX5在数据和视图两个层面的组件上 ，都提供了大量可通过表达式来定义的动态属性。当表达式依赖的数据项改变时 ，表达式会自 动重新计算 ，并通过属性动态影响组件的显示和行为。我们把页面上的这种由数据驱动界面动态交互的能力统称为 “数据绑定”。 由于在数据和视图两个层面 ，表达式属性的作用有所不同 ，我们把表达式属性分为两类 ：  规则表达式 ：用于定义数据组件上的只读、必填、计算和约束等数据规则 ；  绑定表达式 ：用于定义视图组件上的数据、状态、样式等各种动态交互属性。 “规则表达式”和 “绑定表达式”都采用 JS表达式语法 ，但不同的表达式属性有不同的作用和描述规则。下面我们会对 WeX5 中提 供的各种表达式属性 ，逐个展开进行讲解。 本文所用到案例参见 WeX5模型资源中的 “数据绑定”（/UI2/demo/misc/bind/index.w ）。启动 WeX5 自带的T