【分享】WeX5的正确打开方式（6）——数据组件初探

╰半橙微兮° 2022-04-24 05:46 246阅读 0赞

本文是【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组件编辑列，加入如下数据。

![图片描述][513453537-577b5d5f9020e_articlex]

接着右击data组件，选择编辑数据，增加数据如下：

![图片描述][2260177154-577b5d69a9aca_articlex]

好了，数据组件填好了，通过这两部，大家也应该知道了data组件的各个选项的意义了吧。从数据管理的角度上来看，一个data组件就是一个数据集合，这里我使用的数据集合是路飞的船员。在实际应用时要好好设计数据集合的划分，比如说你可以以船为单位划分一个个团队，也可以以剑客、厨师这种职业划分；更扁平化的处理是以人为单位，所在的海贼船和个人职业等都归到个人的属性里面去。  
数据组件建好之后，接着就是数据的展现了。很明显我们上面建立的是一个数据表格，展现组件应该选表格类型的组件，这里我选用的是listTable组件。

![图片描述][1245271166-577b5d73dccef_articlex]

完全的可视化设计！选择需要展现的 data，每个数据项的输出方式也可以单独选择，这就是便利！如果你没有一个顶级的机械键盘，我猜你永远都不会想去敲文章开头那段代码吧！

马上点开运行测试，看看效果：

![图片描述][2800304694-577b5d7dee239_articlex]

就出来了，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")

结果如下：

![图片描述][3334833310-577b5d8d5574a_articlex]

对于数据表格的操作，理所当然我们要知道改动的位置（哪一行哪一列），所以setValue应该要传3个参数：行、列，设置值。但我并没有传行参数进去，只传了一个‘height’列和值进去。这里利用了数据表格的当前列作为默认参数，这个当前列就是官方说法中的游标。嗯，游标。上图中可以看出，鼠标点到哪一行就是表格的当前行。另外可以看到，当表格中的数据被改变的时候，input框中的值也随之而变。也就是说数据表格中的数据都已经被自动设置为可观察对象了。

也就是说，我们从后台获取数据，不断更新data组件里面的数据，就能实现对界面的更新。data组件就是一个中间层，它分离了UI层和后台数据模型，前后端可以独立开发，最后使用data组件将前后连接起来。

**总结**  
所有计算机程序都是对数据的操作和展现，应用开发也不例外，更具体的区分就是数据的存储、数据的处理以及数据的展现三大部分。WeX5中使用了MVVM框架的Knockout.js并在它的基础上封装了可视化的data组件，使用可视化的方式进行数据管理，简化了开发难度、提高了开发效率。本文简单介绍了data组件的背景、应用场景和简单的用法，希望能帮助大家理解data组件。文章最后也简单展示了数据交互的编程，更为具体的API介绍将在下一篇中介绍  
，码字不易，顺手点赞哈

[513453537-577b5d5f9020e_articlex]: /images/20220218/d73430f306a74be6a092d8d4d53bbcd3.png
[2260177154-577b5d69a9aca_articlex]: /images/20220218/24064dd210864ebfadaf92bf657a0135.png
[1245271166-577b5d73dccef_articlex]: /images/20220218/04d07c6561cd4785b689d0b7222fbef6.png
[2800304694-577b5d7dee239_articlex]: /images/20220218/404b4decf1544e148119b44b6e7439eb.png
[3334833310-577b5d8d5574a_articlex]: /images/20220218/34732041648f4d2da96640bd3a70b9cc.png