本文是【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介紹將在下一篇中介紹，碼字不易 ，順手點贊哈~