前提

1.在2.1确定信息步骤中对页面中私有数据和共有数据进行了划分,即用红色方框标出私有数据,用紫色方框标出共有数据

2.理解 执行模型

3.掌握 数据绑定自由标注

步骤
前提:

1.掌握 数据绑定

1.了解 绑定数据编程

注意:

1. 通常数据绑定是对私有数据进行标注。

  • 录入类相关的元素(表单元素、富文本、单选等)使用数据绑定进行标注;具体查看常见 处理方式

2.私有数据(数据绑定)是有加载状态的,公有数据(自由标注)是没有加载状态的

步骤:

1.结合框架图,判断产品是否已对此类信息点进行数据绑定

1)确保框架图中的红色方框已经被数据绑定

① 常见 绑定模式

  • 对页面框架截图中确定的循环体部分,需要在外层使用数组绑定。

② 常见 处理方式

③ 对 扩展元素进行绑定

  • 在对扩展元素绑定时,效果已经由产品完成,程序只需要根据文档中的元素属性对其使用数据绑定。点击查看 实例参考

如果产品使用自由标注或者数据绑定不对,如果问题不大,建议对其进行兼容,并给产品同事发送(页面问题咨询)>(使用第12项)

2)确保数据初始化中的信息点与信息结构图中的信息点对应;已明白数据初始化中的其他变量的含义(不清楚请咨询产品)

  • 默认初始化数据是由产品构造(页面中data层里的同步元素的逻辑设置->数据绑定->绑定变量初始化内)
  • 如果构造初始化数据, 点击查看

3) 如果对标注进行调整,请重新 进行测试

2.当页面中某个信息点或者某个区块(如果一个区块存在加载状态,往往区块内的信息点可以不存在加载状态)缺少加载状态时,请给产品同事发送(页面问题咨询)>(使用第13项)

3.当页面中某个信息点或者某个区块存在多状态,在wide中审查产品是否在页面中已经制作了所有状态并且可以通过初始化中的变量来对页面显示的状态进行切换

  • 如果缺少状态,请给产品同事发送(页面问题咨询)>(使用第11项)
  • 当动态化列表时,当列表为空时,必须有一个友好提示,即列表为空的状态(如果没有,给产品同事发送(页面问题咨询)>(使用第8项))
常用技巧和注意事项:

1.下级同步数据元素依赖上级同步数据元素的返回值,可以做监听操作

2.对表格的绑定

 元素 描述 标签绑定方式
 table带有表头的循环tbody数组绑定

3.循环中关于变量的选择方式,查看 绑定数据编程

4.在同一个页面出现同一张表的CU操作时,C操作使用设置id和name的方式,U操作使用数据绑定的形式操作更新动作,如果存在重复的绑定参数,U更新操作数据绑定时使用参数名(即字段名)+u的形式

5.在录入页面中如果只使用id和name的方式提交数据时,如果提交的元素#+id(设置唯一性的id和name)过多,那么可以通过类选择器.+class的方式(设置class和name)提交

6.序号类在数据库没有字段,可在前端通过计算的方式解决

7.如果单个元素存在多个属性绑定时可以在一个属性绑定中完成多个属性绑定工作,例如{"data-value":yhb7sss,"data-wwxxx":yhb7xxx}

8.多数组嵌套,需要更新内层数组的数据时,需要先从外层数组更新,最好是全部更新

9.在处理view时,数据绑定的变量名前面加上view的名称,如topxxx、leftxxx等等。

10.在数据绑定时,文本输入值绑定:绑定的变量随着输入值变化而改变,表单元素值绑定:绑定的变量不会随着输入值变化而变化,只有光标离开后,变量才会改变。

11.有的项目产品阶段列表每项的进入动画可能存在多种效果或者一种效果(使用延时设置)[存在一些老项目,在产品对列表进行数据绑定时就不会在技术阶段遇到这个问题了],针对这种情况,技术阶段动态化时可以只表现为一种,如果原来存在延时设置,可以通过$index()+“N”来处理

12.当限定条件与后台数据没有关联时,需要在数据绑定阶段处理.但限定条件受后台数据影响时,数据绑定阶段不考虑逻辑问题,直接显示该字段