【分享】WeX5的正确打开方式(6)——数据组件初探
本文是【WeX5的正确打开方式】系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式。
数据组件的由来
上一篇 WeX5绑定机制我们实现了一个简单的记账本应用,当时所有数据都用 JSON 对象写在 js 代码里面,然后通过绑定机制将数据和UI界面
绑定起来。我们是这样写的:
1 var testData = [ {
2 fType : 'out',
3 fClass : '购物',
4 fMoney : 465,
5 fDate : '2015-05-24',
6 fDescription : '这是备注'
7 }, {
8 fType : 'out',
9 fClass : '餐费',
10 fMoney : 50,
11 fDate : '2015-10-22',
12 fDescription : '吃麻辣烫'
13 }, {
14 fType : 'in',
15 fClass : '奖金',
16 fMoney : 500,
17 fDate : '2015-10-22',
18 fDescription : '干得不错'
19 }, {
20 fType : 'in',
21 fClass : '交通',
22 fMoney : 85,
23 fDate : '2015-10-22',
24 fDescription : '打了个车'
25 } ];
26
27 var Model = function() {
28 this.callParent();
29 this.accountData = testData;
30 };
同学们动手操作的时候估计也发现了,在 js 中写 JSON 对象并不能很直观地反应出数据的结构。另外在 js 中写完之后还是要回到设计界面或者HTML源码中去绑定相应的数据,操作繁琐且拼写很容易出错。你可能会想:开发过程中要是能有一个可视化的组件来集中存放数据,不用全部自己手写代码就好了。恰好,App开发工具——WeX5 实现了你的愿望,这个组件就是数据组件。通过在页面中嵌入一个 data 组件,所有数据就被嵌入到网页中,在开发的时候就可以通过可视化的方式来管理数据了。这对提高效率,减低出错率都有很大的帮助。
用起来
说了这么多,好不好用,用了才知道。先往页面中加入一个数据组件,记得把 data 组件挂在 model 组件之下,然后右击data组件编辑列,加入如下数据。
接着右击data组件,选择编辑数据,增加数据如下:
好了,数据组件填好了,通过这两部,大家也应该知道了data组件的各个选项的意义了吧。从数据管理的角度上来看,一个data组件就是一个数据集合,这里我使用的数据集合是路飞的船员。在实际应用时要好好设计数据集合的划分,比如说你可以以船为单位划分一个个团队,也可以以剑客、厨师这种职业划分;更扁平化的处理是以人为单位,所在的海贼船和个人职业等都归到个人的属性里面去。
数据组件建好之后,接着就是数据的展现了。很明显我们上面建立的是一个数据表格,展现组件应该选表格类型的组件,这里我选用的是listTable组件。
完全的可视化设计!选择需要展现的 data,每个数据项的输出方式也可以单独选择,这就是便利!如果你没有一个顶级的机械键盘,我猜你永远都不会想去敲文章开头那段代码吧!
马上点开运行测试,看看效果:
就出来了,so easy! 应用开发,就应该要这样的简单!!
底层结构
data组件建好了之后,再回去HTML源码去看看,可以看到如下的代码结构:
1 <div component="$UI/system/components/justep/model/model" xid="model">
2 <div component="$UI/system/components/justep/data/data" autoLoad="true" xid="people" idColumn="name">
3 <column isCalculate="true" label="姓名" name="name" type="String" xid="xid2"></column>
4 <column isCalculate="true" label="身高" name="height" type="Float" xid="xid3"></column>
5 <column isCalculate="true" label="体重" name="weight" type="Float" xid="xid4"></column>
6 <data xid="default3">
7 [{"name":"Luffy","height":176,"weight":65},
8 {"name":"Zoro","height":185,"weight":75},
9 {"name":"Sanji","height":184.9,"weight":65.5},
10 {"name":"Nami","height":168,"weight":49.8}]
11 </data>
12 </div>
13 </div>
可以清晰地看到data组件是挂在model组件之下,<column>标签定义了表头,而<data>标签则存储了实际的数据,这里有编码的转义所以看起来比较难看,不过也能大概看出来。
这个是在可视化开发阶段的状态,在编译之后data组件内的数据作为model下的对象被读入到内存中,并与绑定元素进行数据绑定,此时的页面HTML源码中就再也没有data组件了。
数据的更新
使用上面的方法很容易就实现了数据的展示,接下来看看更复杂的数据更新和交互。
为了简单点说明问题,我们还是使用常规的事件来展示,先往页面中加入一个按钮和一个input组件,按钮的点击事件如下:
1 Model.prototype.button1Click = function(event){
2 var data = this.comp('people');
3 data.setValue('height', 200);
4 };
input组件与data中的height绑定起来,设置其bind-value如下:
1 bind-value: $model.people.val("height")
结果如下:
对于数据表格的操作,理所当然我们要知道改动的位置(哪一行哪一列),所以setValue应该要传3个参数:行、列,设置值。但我并没有传行参数进去,只传了一个‘height’列和值进去。这里利用了数据表格的当前列作为默认参数,这个当前列就是官方说法中的游标。嗯,游标。上图中可以看出,鼠标点到哪一行就是表格的当前行。另外可以看到,当表格中的数据被改变的时候,input框中的值也随之而变。也就是说数据表格中的数据都已经被自动设置为可观察对象了。
也就是说,我们从后台获取数据,不断更新data组件里面的数据,就能实现对界面的更新。data组件就是一个中间层,它分离了UI层和后台数据模型,前后端可以独立开发,最后使用data组件将前后连接起来。
总结
所有计算机程序都是对数据的操作和展现,应用开发也不例外,更具体的区分就是数据的存储、数据的处理以及数据的展现三大部分。WeX5中使用了MVVM框架的Knockout.js并在它的基础上封装了可视化的data组件,使用可视化的方式进行数据管理,简化了开发难度、提高了开发效率。本文简单介绍了data组件的背景、应用场景和简单的用法,希望能帮助大家理解data组件。文章最后也简单展示了数据交互的编程,更为具体的API介绍将在下一篇中介绍
,码字不易,顺手点赞哈