【分享】WeX5的正确打开方式（7）——数据组件详解

    本文是【WeX5的正确打开方式】系列的第7篇文章，详细介绍WeX5中数据组件的增删改查以及数据定位方法。

前言


    上一篇 数据组件初探 我们简单介绍了数据组件的引入和底层结构以及特性，并实现了简单的数据展示和数据改动。上一篇中简单提到了，数据组件就是后台数据库表在前端的一个映射，前后端开发人员只要预定好数据组件的内容，就可以简单实现前后端开发的分离。既然数据组件是一个数据库表的映射，那它的基本结构就是一张 2 维表格，举个栗子，定义一个 html5开发工具 的数据组件，xid 为 devtool ：

+-------+--------------------+----------------------------+---------+
| index | name               | url                        | country |
+-------+--------------------+----------------------------+---------+
|   1   | JetBrains WebStorm | https://www.jetbrains.com/ | USA     |
|   2   | Sencha Architect   | https://www.sencha.com/    | USA     |
|   3   | Justep Wex5        | http://www.wex5.com/       | CN      |
|   4   | Adobe Dreamweaver  | http://www.adobe.com/      | USA     |
|   5   | Google Web Toolkit | https://www.google.com/    | USA     |
+-------+--------------------+------------------------- --+---------+
    数据组件的 xid 就是数据库表的名字，简单理解就是我们的身份证，通过xid可以找到这个数据库表。数据组件中还有一个 idColumn 属性，上表中的 index就是 idColumn，就是说这一列是数据库表的 id 列，比如我们的身份证号就是一个 id 列。再看数据组件的内容，为了实现某个数据的增删改查，我们还必须定位到相应的行和列，这涉及到了数据组件的定位方法。

    下面分别介绍数据组件的定位机制和增删改查方法。

数据定位

    首先是数据组件的定位，Wex5 中的组件实例查询方法 comp(xid) 当然是可以找到相应的数据组件了。另外，由于是直接挂在 model 组件之下的，Wex5 为了简化数据组件的引用，model.xid 的方法也可以引用到数据组件。比如上文的 html5开发工具数据表，就可以直接使用 Model.devtool 来使用。