今天繼續(xù)WeX5的綁定機(jī)制。

需求分析

記賬本要實(shí)現(xiàn)的效果就是可以展示所有賬單，還能實(shí)時(shí)動態(tài)編輯每一筆賬單，官方案例的效果圖如下：

展示頁：

編輯頁

個(gè)人覺得官方案例加入了許多元素，不熟悉的同學(xué)每一個(gè)點(diǎn)都很難理解，所以為了更清晰地介紹綁定機(jī)制，小茄這里去掉了數(shù)據(jù)庫和數(shù)據(jù)組件，改用寫死的JSON數(shù)據(jù)來測試；UI層上也做簡化，去掉頁面片段的跳轉(zhuǎn)，使用一個(gè)頁面片段進(jìn)行演示。

頁面布局

先看看頁面布局，由于要展示多項(xiàng)數(shù)據(jù)，所以明顯需要一個(gè)列表組件；另外為了實(shí)現(xiàn)編輯功能，還需要布局一個(gè)編輯組件。布局起來非常簡單：

展示列表組件：

列表組件使用WeX5現(xiàn)成的 list 控件，這個(gè)控件內(nèi)部自帶一個(gè) list 子項(xiàng)的模板，在模板中放入所需的幾個(gè) output 和刪除按鈕即可。當(dāng)然，為了達(dá)到上圖的布局效果，還需要加入一些布局組件。有問題的同學(xué)可以看看官方視頻教程，樣式的設(shè)置也請參考視頻，這不是本文的重點(diǎn)，在此不再贅述。

數(shù)據(jù)綁定

重要的一點(diǎn)是要將JSON數(shù)據(jù)綁定到list模板中，這里用的是foreach綁定，見下圖（當(dāng)然也可以用template綁定+模板文件來實(shí)現(xiàn)，不過那樣的話還需要編寫模板文件，在自定義較強(qiáng)的場景下可以使用）。其他組件相應(yīng)的綁定也如上圖所示，分別在各個(gè) output 的 bind-ref 中輸入 fClass、fMoney等。

JS中給 accountData 一組靜態(tài)數(shù)據(jù)，實(shí)際應(yīng)用中這些數(shù)據(jù)應(yīng)該是從后臺數(shù)據(jù)庫中獲取的。

1 var testData = [{2 fType : 'out',3 fClass : '購物',4 fMoney : 465,5 fDate : '2015-05-24',6 fDescription : '這是備注'7 }, {8 fType : 'out',9 fClass : '餐費(fèi)',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 : '干得不錯(cuò)'19 }, {20 fType : 'in',21 fClass : '交通',22 fMoney : 85,23 fDate : '2015-10-22',24 fDescription : '打了個(gè)車'25 }];26 27 var Model = function() {28 this.callParent();29 this.accountData = testData;30 };

這時(shí)候打開瀏覽器調(diào)試可以看到JSON已經(jīng)完整展現(xiàn)在頁面上。回顧一下上兩篇文章的內(nèi)容，明顯上述寫法就是簡單的初始化，并沒有設(shè)置可觀察對象，也就是說數(shù)據(jù)變更也不會更新UI。下面來設(shè)置雙向綁定。

首先要明確的一點(diǎn)是，我們不單要監(jiān)視 testData 數(shù)組的狀態(tài)變化，還需要監(jiān)視每個(gè)JSON數(shù)據(jù)的變化，所以單純的設(shè)置數(shù)組為可監(jiān)視對象是不夠的，還需要監(jiān)視數(shù)組的值。這里需要改變一下寫法，不能再一次性賦值了，要改成構(gòu)造函數(shù)動態(tài)賦值。

1 function newItem(data) {2 var testItem = {3 fType : justep.Bind.observable(data.fType),4 fClass : justep.Bind.observable(data.fClass),5 fMoney : justep.Bind.observable(data.fMoney),6 fDate : justep.Bind.observable(data.fDate),7 fDescription : justep.Bind.observable(data.fDescription)8 };9 return testItem;10 }11 12 var Model = function() {13 this.callParent();14 this.accountData = justep.Bind.observableArray([]);15 for (var n = 0, len = testData.length; n < len; n++) {16 this.accountData.push(newItem(testData[n]));17 }18 };

這樣綁定之后，無論是改變數(shù)組（增減數(shù)組項(xiàng)）還是改變具體的數(shù)據(jù)都可以讓界面自動更新了。如果采用最開始的寫法，那是不會自動更新UI界面的。

上面的增加項(xiàng)已經(jīng)是固定的，示范下而已，現(xiàn)在試著動態(tài)改變數(shù)據(jù)。先放效果：

相比官方的轉(zhuǎn)到一個(gè)獨(dú)立頁面的效果，這個(gè)效果更加的符合認(rèn)知習(xí)慣，而且不用刷到另一頁，體驗(yàn)更加友好，鼠標(biāo)點(diǎn)哪改哪~

做法也很簡單，就是在output框下再接一個(gè)input框，設(shè)置output和input的 visible互斥，點(diǎn)擊事件更改visible狀態(tài)。HTML源碼片段是這樣的：

1 <div component="$UI/system/components/justep/output/output" class="x-output h3" xid="output2" bind-visible="!editing.get()" bind-ref="fClass" bind-click="editBind" />2 <input component="$UI/system/components/justep/input/input" class="form-control h3" xid="input1" bind-visible="editing" bind-value="fClass" bind-hasFocus="editing"/>

js 里面就一句：

1 Model.prototype.editBind = function(event){2 var row = event.bindingContext.$object;3 row.editing.set(true);4 };5

當(dāng)然，editing 也必須要設(shè)置為可觀察對象，不然沒法更新UI展現(xiàn)。

1 function newItem(data) {2 var testItem = {3 fType : justep.Bind.observable(data.fType),4 fClass : justep.Bind.observable(data.fClass),5 fMoney : justep.Bind.observable(data.fMoney),6 fDate : justep.Bind.observable(data.fDate),7 fDescription : justep.Bind.observable(data.fDescription),8 editing: justep.Bind.observable(data.editing || false)9 };10 return testItem;11 }

記賬本還要有個(gè)刪除功能，這個(gè)當(dāng)然也是非常簡單了，直接操作可觀察對象數(shù)組即可，事件綁定在刪除按鈕上。

1 Model.prototype.deleteBtnClick = function(event) {2 var row = event.bindingContext.$object;3 this.accountData.remove(row);4 };

還有個(gè)增加記錄，增加的操作就是先增加一條默認(rèn)的數(shù)據(jù)，然后讓用戶去改動就變成新建啦，多加一個(gè)增加按鈕綁定增加事件即可。

1 Model.prototype.addItem = function(event){2 this.accountData.push(newItem({3 fType : 'in',4 fClass : '獎金',5 fMoney : 5000,6 fDate : '2015-10-22',7 fDescription : '干得不錯(cuò)'8 }));9 };

這樣就算做好了一個(gè)記賬本啦，是不是感覺html5 APP開發(fā)很簡單呢？？官方的教程使用了data組件與后臺數(shù)據(jù)庫通信，其實(shí)也就是將上述的testData換成Data組件而已，理解了綁定再去看就簡單了。
哦，還有個(gè)美化的，根據(jù)收入支出分類以不同的顏色顯示：li 項(xiàng)的 bind-css 設(shè)置為 {'account-in' : fType.get() == 'in','account-out' : fType.get()== 'out'} 就OK了，上個(gè)圖：

Mapping 插件

大家可以看到上面為了將JSON對象中的每一項(xiàng)都設(shè)為可觀察對象，我這邊使用了一個(gè) newItem 函數(shù)來將所有元素設(shè)置為可觀察對象，而Mapping 插件就是起同樣作用的。這里就不再舉例說明了，大家看官方視頻對照著用就可以了。

總結(jié)
這一篇以一個(gè)記賬本案例來總結(jié)了一下各種綁定的用法，希望能加深大家對綁定機(jī)制的理解。碼字不易，順手點(diǎn)贊哈~

總結(jié)

以上是生活随笔為你收集整理的【分享】WeX5的正确打开方式（5）——绑定机制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。