摘要：訂閱事件，在其中做更新數(shù)據(jù)的操作需要特殊注意的是，自定義事件的訂閱和觸發(fā)可以不在同一個(gè)頁面的腳本環(huán)境中完成，只需要保證自定義事件的觸發(fā)在訂閱之后即可。

本節(jié)教程將介紹如何用DeviceOne簡單而高效的完成一個(gè)新聞頁面。

導(dǎo)入項(xiàng)目
數(shù)據(jù)模板分離MVVM模型
自定義事件
展示新聞
九宮格展示
將要學(xué)習(xí)的demo效果圖如下所示

導(dǎo)入完整項(xiàng)目

本節(jié)示例demo請(qǐng)參考下載地址，可以導(dǎo)入到設(shè)計(jì)器中學(xué)習(xí)。

為了方便大家理解頁面結(jié)構(gòu)，請(qǐng)參考下圖

圖中紅框所示的上面部分是SegmentView組件，和下面的BottomBar共同組成頁面公共部分，而藍(lán)框中是一個(gè)SlideView組件，可以左右滑動(dòng)切換頁面且跟SegmentView聯(lián)動(dòng)，頁面?zhèn)€數(shù)則是取決于數(shù)據(jù)條數(shù)，如數(shù)據(jù)有四條就有四個(gè)頁面；綠框所示是ListView組件，在本教程中是SlideView的模板，而ListView又可以綁定不同模板來展現(xiàn)不同頁面；而黃框所示是跟上節(jié)教程中相同的直接引用一個(gè)UI頁面。總而言之，這里的頁面層級(jí)關(guān)系是SlideView的模板中嵌套了一個(gè)ListView，而ListView的模板又是其他不同頁面。

數(shù)據(jù)模板分離
DeviceOne的數(shù)據(jù)綁定是采用了MVVM模式的，實(shí)現(xiàn)了頁面和數(shù)據(jù)分離，數(shù)據(jù)通過綁定在不同模板上控制了頁面的顯示。DeviceOne提供了兩個(gè)數(shù)據(jù)綁定組件，都是MM類型組件，一個(gè)是ListData，它本質(zhì)上是一個(gè)可變數(shù)組（支持JSON array），可以增刪改查數(shù)據(jù)；另外一個(gè)是HashData，它本質(zhì)上是一個(gè)可變key-value鍵值對(duì)，也可以增刪改查。

這里我們給SegmentView定義一個(gè)數(shù)據(jù)源jsonTabs，
再把這個(gè)數(shù)據(jù)源賦值給數(shù)據(jù)綁定組件ListData，定義SegmentView的數(shù)據(jù)模型module。

因?yàn)閿?shù)據(jù)綁定組件可以綁定不同的數(shù)據(jù)源，而一個(gè)數(shù)據(jù)源只能被一個(gè)數(shù)據(jù)綁定組件綁定，是一對(duì)多的關(guān)系，所以當(dāng)我們想把相同的數(shù)據(jù)源作為SlideView的數(shù)據(jù)模型module時(shí)需要復(fù)制一份數(shù)據(jù)源。

定義好數(shù)據(jù)模型module，我們?cè)賮矶xViewModel也就是模板視圖。先給SegmentView定義一個(gè)模板視圖UI頁面newsTypeTabTemplate.ui，修改根ALayout的id為do_ALayout_root，里面拖拽一個(gè)Label，修改id為do_Label_title，調(diào)整Label的位置和大小。

然后我們?cè)趎ewsTypeTabTemplate.ui.js里把Label的text和tag屬性通過UI組件通用的setMapping方法跟數(shù)據(jù)模型module聯(lián)系起來，定義映射關(guān)系，這樣ViewModule模板視圖就完成了。（其中name和selected是jsonTabs數(shù)據(jù)源中的key）

最后我們要將數(shù)據(jù)模型module和它們都建立起聯(lián)系，只需要用SegmentView添加綁定了數(shù)據(jù)模型module的ListData組件即可。

更多關(guān)于數(shù)據(jù)綁定的介紹，詳見數(shù)據(jù)綁定

自定義事件
為了讓更真實(shí)的模擬新聞?lì)怉pp的使用習(xí)慣，我們處理一下選擇不同的SegmentView時(shí)底下的SlideView頁面也跟著切換的效果，即讓SegmentView和SlideView聯(lián)動(dòng)起來。這個(gè)步驟非常簡單，只需要在SegmentView的indexChanged事件中將當(dāng)前SegmentView所處cell的index賦值給SlideView的cell，即可完成。

我們想要在SlideView切換不同的cell的同時(shí)頁面數(shù)據(jù)也跟著切換，這就需要在SlideView的indexChanged事件里做大量操作，為了優(yōu)化代碼結(jié)構(gòu)，這里就將切換數(shù)據(jù)的操作全部放在自定義事件selectOneTab中完成，只在觸發(fā)indexChanged事件的回調(diào)中同時(shí)觸發(fā)該自定義事件，這樣我們?cè)谟嗛唖electOneTab事件時(shí)所作代碼也都會(huì)被執(zhí)行了。

訂閱selectOneTab事件，在其中做更新數(shù)據(jù)的操作

需要特殊注意的是，自定義事件的訂閱和觸發(fā)可以不在同一個(gè)頁面的腳本環(huán)境中完成，只需要保證自定義事件的觸發(fā)在訂閱之后即可。

更多關(guān)于自定義事件的使用，詳見自定義事件。

這里為了更好的體驗(yàn)效果，讓SlideView能無限滑動(dòng)并且加載速度更快，只需要簡單的設(shè)置兩個(gè)屬性即可。其一就是將SlideView的looping屬性設(shè)置為true，實(shí)現(xiàn)無限滑動(dòng)；其二就是設(shè)置isAllCache屬性為true，在瀏覽上一頁時(shí)預(yù)緩存下個(gè)頁面。

展示新聞
新聞?wù)故卷撁娴臄?shù)據(jù)是通過Http組件請(qǐng)求的后臺(tái)數(shù)據(jù)，在手勢(shì)向下pull或向上push滑動(dòng)頁面時(shí)刷新請(qǐng)求，接下來詳細(xì)說下這個(gè)步驟如何實(shí)現(xiàn)。

展示新聞
用上面同樣的方法，我們先處理一下SlideView的數(shù)據(jù)和模板，不同的是這里SlideView的模板里嵌套了一個(gè)ListView組件，所以我們先處理ListView組件。ListView的數(shù)據(jù)是從后臺(tái)通過http請(qǐng)求獲取的，所以在添加了ListView的頁面newsIndexSlideTemplate.ui對(duì)應(yīng)的newsIndexSlideTemplate.ui.js腳本環(huán)境中去請(qǐng)求數(shù)據(jù)，并在Http的請(qǐng)求成功事件中將數(shù)據(jù)綁定給一個(gè)ListData組件，再讓ListView去綁定該數(shù)據(jù)，同時(shí)復(fù)位pull或push出來的頭部。（需要注意的是，這里直接將請(qǐng)求到的數(shù)據(jù)綁定給ListView組件，所以需要前后臺(tái)溝通好數(shù)據(jù)格式，在后臺(tái)保存時(shí)也是用JSON Array。）

因?yàn)長istView是支持多模版的，這里我們給ListView組件綁定兩個(gè)模板，一個(gè)用于展示新聞列表newsRowTemplate0.ui，一個(gè)用于展示輪播圖片newsRowTemplate1.ui。這兩個(gè)模板也同樣在模板頁的根節(jié)點(diǎn)上調(diào)用setMapping方法定義好數(shù)據(jù)映射關(guān)系，這樣數(shù)據(jù)與模板就結(jié)合起來了，在ListView上就能顯示我們從后臺(tái)請(qǐng)求到的數(shù)據(jù)了。

這里提一個(gè)小的處理，因?yàn)槲覀儾淮_定要展示的數(shù)據(jù)到底有多少個(gè)字節(jié)，全部展示要占用多大的空間，所以我們?cè)O(shè)置ListView的模板頁中要展示數(shù)據(jù)的Label的高度為-1，表示自動(dòng)高度，并且將maxLines屬性設(shè)置為2，表示最多只顯示兩行，這樣就能控制每個(gè)cell顯示數(shù)據(jù)的空間都是固定高度的，數(shù)據(jù)能整齊排列。

另外一個(gè)小處理就是讓圖片顯示的速度更快，因?yàn)樗袌D片都是網(wǎng)絡(luò)圖片，顯示之前都會(huì)先去請(qǐng)求，這樣在網(wǎng)絡(luò)環(huán)境不穩(wěn)定時(shí)可能會(huì)導(dǎo)致圖片顯示框先出現(xiàn)默認(rèn)圖片（設(shè)置defaultImage）再顯示真正要顯示的圖片。這里只需要簡單的設(shè)置ImageView的cacheType為temporary，表示第一次加載圖片時(shí)就緩存到本地，以后每次打開這個(gè)ImageView都會(huì)先讀緩存的本地圖片，然后再讀服務(wù)器的網(wǎng)絡(luò)圖片，這樣就能優(yōu)化ImageView的加載速度，從而提高體驗(yàn)。

刷新新聞
想要在ListView頁面上向下pull和向上push操作中獲取新的數(shù)據(jù)并重新顯示在模板中，首先要設(shè)置ListView的isFooterVisible和isHeaderVisible屬性為true，這樣上下拉的時(shí)候使頭部和尾部可見，再分別在ListView的pull和push事件中去重新請(qǐng)求數(shù)據(jù)，并且在http請(qǐng)求的success事件中調(diào)用ListView的rebound方法讓頭部或尾部復(fù)位。

九宮格展示
最后，我們說一下第三張效果圖中點(diǎn)擊“+”號(hào)會(huì)彈出一個(gè)快速選擇新聞?lì)愋偷腢I界面如何實(shí)現(xiàn)。

首先畫出需要彈出的UI頁面newsTypeGrids.ui，也如之前教程中處理彈出Picker頁面一樣，在該頁面中只放一個(gè)GridView組件，其他地方設(shè)置成灰色半透明效果。再設(shè)置GridView的模板頁newsTypeGridTemplate.ui，同樣定義好數(shù)據(jù)映射，將之前給SegmentView定義的數(shù)據(jù)源也復(fù)制一份讓GridView綁定上，最后只需要在“+”號(hào)的touch事件中讓newsTypeGrids.ui顯示出來即可。