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

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

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

導入完整項目

本節(jié)示例demo請參考下載地址，可以導入到設(shè)計器中學習。

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

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

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

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

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

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

然后我們在newsTypeTabTemplate.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ù)綁定

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

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

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

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

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

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

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

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

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

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

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

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

九宮格展示
最后，我們說一下第三張效果圖中點擊“+”號會彈出一個快速選擇新聞類型的UI界面如何實現(xiàn)。

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