请选择 进入手机版 | 继续访问电脑版
查看: 956|回复: 0
收起左侧

[Wex5] WeX5 Data组件学习

[复制链接]
  • TA的每日心情
    萌哒
    2018-3-8 15:49
  • 发表于 2019-1-9 00:21:46 | 显示全部楼层 |阅读模式

    欢迎加入

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    1 初始化加载状态
    Data组件上有两个关于初始化加载状态属性:autoLoad、autoNew,表示当功能页面打开后data组件的状态,两个属性是互斥的;

    当autoLoad=true时,Data组件在model的onModelConstructing时执行open操作,当autoNew=true时,Data组件在model的

    onModelConstructing时执行newData操作;

    注:data定义的静态数据需要autoLoad=true才进行加载,否则需要主动调用open方法加载;

    2 Data组件相互依赖时候注意顺序
    Data1依赖Data2的时候,注意Data2要放在Data1前面;可以在Model组件中拖动;

    3 Data组件不仅可以感知数值,还可以感知数据类型;
    比如:input组件绑定的是Date型,input组件点击后会显示日期选择框;

    4 规则表达式,以“js:”开头;

    5 环境变量
    $model:当前页面模型对象;
    $data:当前数据对象;
    $row:当前行对象;
    $col:当前列名;
    $rowID:当前行ID;

    上下文对象
    表达式上下文的实现机制:基于JS的with语句
    数据集规则:$data;
    字段规则:$row;

    6 Data组件可以直接使用“$model.xxxData”直接访问;
    注意:在Data构造方法内,不允许出现this.xxxData=xxx;否则,会冲突!

    7 ref、val、label区别
    ref:绑定数据组件,返回可监控对象;
    val:返回数值,用于表达式计算;
    label:返回列的显示名称;

    Data和Data.Row上都存在ref、val、label三个方法,区别:
    Data:
    Data.ref(col, row)
    Data.val(col, row)
    Data.label(col)
    Data.Row:
    Row.ref(col)
    Row.val(col, value)
    Row.label(col)

    8 表达式中的聚合函数
    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)

    9 在表达式中使用的JS对象和函数
    可以使用任何“可以访问到的JS对象和函数”
    JS全局函数和对象;
    window对象;
    jQuery:$=window.$;
    justep工具类:justep=window.justep;
    环境变量:$model, $data, $row……;

    获取页面组件
    获取当前页面上的X5组件对象:$model.comp(xid|element);
    获取当前页面上的HTML原生对象:$model.getElementByXid(xid);

    基于$model自定义JS函数
    自定义函数:在页面的JS文件中,为Model增加函数,通过$model访问;
    自定义函数库:在页面的JS文件中,引入JS函数库,将函数库对象设置为Model变量,通过$model访问;

    10 绑定表达式
    环境变量
    $model:当前页面模型对象;
    $element:当前HTML元素对象;
    $index:当前行索引,仅当组件在list或foreach内有效(注意,$index是一个函数);
    $object:当前上下文对象;

    bind-ref、bind-labelRef:绑定数据列的ref感知对象;针对x5的组件,双向数据感知;能感知数据类型,比如string、number、

    date,会做类型校验;
    其他数据绑定(多用于HTML原生组件)
    bind-value:适用于input、password、select、textarea;单向感知;
    bind-checked:适用于checkbox、radio;
    bind-text:适用于span、label、em;
    面向数据编程:编程重心在数据上,而不是在视图上;

    11 状态相关绑定(boolean表达式)
    bind-visible:显示;
    bind-hasFocus:是否获得输入焦点;
    bind-enabled:可用;
    bind-disabled:禁用(优先);

    12 绑定样式(JSON表达式)
    bind-style: {'backgroundColor': foodData.val('fPrice')>30?'red':null}
    bind-css: {'text-danger':foodData.val('fPrice')>30}

    13 其他HTML属性绑定
    bind-attr-src:WeX5 <wbr>Data组件学习
    bind-attr-href:
    bind-attr-title
    bind-attr-xxxx

    14 控制类数据绑定
    bind-if:当前组件的内容是否创建;
    bind-ifnot:同上;
    bind-with:指定内部组件绑定表达式的上下文对象($object);
    bind-foreach:按指定可监控数组中的数据项,创建多份组件内容,每一份组件内容的上下文对象分别对应数组的每一个数据项;

    15 其他绑定
    bind-html:动态创建innerHTML;
    bind-uniqueName:动态创建唯一的name;

    16 过滤表达式
    List的filter属性过滤可显示的数据项;

    17 事件编程
    event.bindingContext
    $object:model、row或其他
    在list组件内:$object=row
    在bind-with环境内:$object=指定的上下文对象
    在bind-foreach环境内:$object=foreach的数据项

    当前事件监听对象
    on事件:event.source,X5组件对象;还可以绑定操作;
    bind事件:event.currenttarget,HTML元素对象;

    表达式上下文一览表
    WeX5 <wbr>Data组件学习
    001Sm5PUzy73gQZICVR0b.png
    -----------------------------------------------------------------------------------------------------------
    注意:
    Data组件,设计时候new了数据;若重写了CustomRefresh回调方法,则之前设计时候的数据就不会被加载了;需要自己在CustomRefresh方法内add数据进去!!!等于是两条独立的加载路线,一条是设计时候加入的;一条是通过代码去加入!

    所谓活着的人,就是不断挑战的人,不断攀登命运峻峰的人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    快速回复 返回顶部 返回列表