X5V3.0页面框架核心讲解之数据绑定.pptxVIP

X5 V3.0 页面框架核心讲解之数据绑定 X5的页面组成 Data 数据 规则表达式 Code Logic 代码逻辑 View 视图 绑定表达式 bind—数据绑定 数据绑定、规则表达式、绑定表达式 事件编程 Javascript模块化 数据与视图分离 页面描述与代码逻辑分离 数据组件与数据规则 数据组件：data、bizData、jsonData 支持列行数据（或JSON数据）的数据缓存 为展现组件提供感知数据源 定义数据规则 数据规则 数据集规则：只读 字段规则：只读、计算、必填、约束 规则表达式 JS表达式：以“js:”开头（在下一个发布版本中“js:”可以省略） 环境变量 $model：当前页面模型对象 $data：当前数据对象 （下面的几个环境变量只对字段规则表达式有效） $row：当前行对象 $col：当前列名 $rowID：当前行ID 上下文对象 数据集规则：$data 字段规则：$row (表达式上下文的实现机制：基于JS的with语句) ref、val、label 在Data和Data.Row上都存在ref、val、label三个方法 Data.ref(col, row) Row.ref(col) Data.val(col, row) Row.val(col, value) Data.label(col) Row.label(col) ref：返回可监控的数据对象，用于数据绑定 val：返回数值，只是一个简单值，用于表达式计算 label：返回列的显示名称（标签） 表达式中常用的聚合函数 number data.count(function filterCallback) number data.sum(string column, function filterCallback) number data.avg(string column, function filterCallback) number data.min(string column, function filterCallback) number data.max(string column, function filterCallback) 在表达式中使用JS对象和函数 可以使用任何“可以访问到的JS对象和函数” Javasrcipt的全局函数和对象 window对象 jQuery：$ = window.$ justep工具类：justep = window.justep 环境变量：$model、$data、$row…… 获取页面组件 获取当前页面上的X5组件对象： $p(xid | element) 获取当前页面上的HTML原生对象：$model.getElementByXid(xid) 基于$model自定义JS函数（或函数库） 自定义函数：在页面的JS文件中，为Model增加函数，通过$model访问 自定义函数库：在页面的JS文件中，引入JS函数库，将函数库对象设置为Model的变量，通过$model访问 绑定表达式 展现组件的绑定表达式能力不仅限于数值的感知显示，所有的HTML属性都可以进行数据绑定。 “绑定表达式”自动监控表达式中的可监控数据，当可监控数据改变时，表达式会自动计算，并依据计算结果动态改变组件的DOM结构，从而达成“数据驱动界面”的能力。 绑定表达式 表达式语法：JS表达式 环境变量： $model：当前页面模型对象 $element：当前HTML元素对象 $index：当前行索引，仅当组件在list或foreach内有效 $object：当前上下文对象 上下文对象： $object：它的值与组件当前环境有关（model、row或其他） 绑定表达式 REF数据绑定 bind-ref、bind-labelRef：绑定数据列的ref感知对象 数据感知：双向数据感知 类型感知：自适应编辑模式（input）、类型校验 规则感知：只读规则、计算规则、必填规则、约束规则 其他数据绑定（多用于HTML原生组件） bind-value：适用于input、password、select、textarea bind-checked：适用于checkbox、radio bind-text ：适用于span、label、em…… 与bind-ref的区别：bind-ref是X5组件特有的感知属性，不仅可以感知数据，同时可以感知数据类型和数据规则 绑定ref和val的区别：bind-value和bind-checked直接绑定到ref会获得双向数据感知能力，绑定到val或表达式则只能单向感知 面向数据编程：在数据感知页面体系中，编程视角要以数据为核心 绑定表达式 状态相关绑定（boolean表达式） bi