資訊專欄INFORMATION COLUMN
摘要：訂閱事件，在其中做更新數據的操作需要特殊注意的是，自定義事件的訂閱和觸發可以不在同一個頁面的腳本環境中完成，只需要保證自定義事件的觸發在訂閱之后即可。
本節教程將介紹如何用DeviceOne簡單而高效的完成一個新聞頁面。
導入項目
數據模板分離MVVM模型
自定義事件
展示新聞
九宮格展示
將要學習的demo效果圖如下所示
導入完整項目
本節示例demo請參考下載地址，可以導入到設計器中學習。
為了方便大家理解頁面結構，請參考下圖
圖中紅框所示的上面部分是SegmentView組件，和下面的BottomBar共同組成頁面公共部分，而藍框中是一個SlideView組件，可以左右滑動切換頁面且跟SegmentView聯動，頁面個數則是取決于數據條數，如數據有四條就有四個頁面；綠框所示是ListView組件，在本教程中是SlideView的模板，而ListView又可以綁定不同模板來展現不同頁面；而黃框所示是跟上節教程中相同的直接引用一個UI頁面。總而言之，這里的頁面層級關系是SlideView的模板中嵌套了一個ListView，而ListView的模板又是其他不同頁面。
數據模板分離
DeviceOne的數據綁定是采用了MVVM模式的，實現了頁面和數據分離，數據通過綁定在不同模板上控制了頁面的顯示。DeviceOne提供了兩個數據綁定組件，都是MM類型組件，一個是ListData，它本質上是一個可變數組（支持JSON array），可以增刪改查數據；另外一個是HashData，它本質上是一個可變key-value鍵值對，也可以增刪改查。
這里我們給SegmentView定義一個數據源jsonTabs，
再把這個數據源賦值給數據綁定組件ListData，定義SegmentView的數據模型module。
因為數據綁定組件可以綁定不同的數據源，而一個數據源只能被一個數據綁定組件綁定，是一對多的關系，所以當我們想把相同的數據源作為SlideView的數據模型module時需要復制一份數據源。
定義好數據模型module，我們再來定義ViewModel也就是模板視圖。先給SegmentView定義一個模板視圖UI頁面newsTypeTabTemplate.ui，修改根ALayout的id為do_ALayout_root，里面拖拽一個Label，修改id為do_Label_title，調整Label的位置和大小。
然后我們在newsTypeTabTemplate.ui.js里把Label的text和tag屬性通過UI組件通用的setMapping方法跟數據模型module聯系起來，定義映射關系，這樣ViewModule模板視圖就完成了。（其中name和selected是jsonTabs數據源中的key）
最后我們要將數據模型module和它們都建立起聯系，只需要用SegmentView添加綁定了數據模型module的ListData組件即可。
更多關于數據綁定的介紹，詳見數據綁定
自定義事件
為了讓更真實的模擬新聞類App的使用習慣，我們處理一下選擇不同的SegmentView時底下的SlideView頁面也跟著切換的效果，即讓SegmentView和SlideView聯動起來。這個步驟非常簡單，只需要在SegmentView的indexChanged事件中將當前SegmentView所處cell的index賦值給SlideView的cell，即可完成。
我們想要在SlideView切換不同的cell的同時頁面數據也跟著切換，這就需要在SlideView的indexChanged事件里做大量操作，為了優化代碼結構，這里就將切換數據的操作全部放在自定義事件selectOneTab中完成，只在觸發indexChanged事件的回調中同時觸發該自定義事件，這樣我們在訂閱selectOneTab事件時所作代碼也都會被執行了。
訂閱selectOneTab事件，在其中做更新數據的操作
需要特殊注意的是，自定義事件的訂閱和觸發可以不在同一個頁面的腳本環境中完成，只需要保證自定義事件的觸發在訂閱之后即可。
更多關于自定義事件的使用，詳見自定義事件。
這里為了更好的體驗效果，讓SlideView能無限滑動并且加載速度更快，只需要簡單的設置兩個屬性即可。其一就是將SlideView的looping屬性設置為true，實現無限滑動；其二就是設置isAllCache屬性為true，在瀏覽上一頁時預緩存下個頁面。
展示新聞
新聞展示頁面的數據是通過Http組件請求的后臺數據，在手勢向下pull或向上push滑動頁面時刷新請求，接下來詳細說下這個步驟如何實現。
展示新聞
用上面同樣的方法，我們先處理一下SlideView的數據和模板，不同的是這里SlideView的模板里嵌套了一個ListView組件，所以我們先處理ListView組件。ListView的數據是從后臺通過http請求獲取的，所以在添加了ListView的頁面newsIndexSlideTemplate.ui對應的newsIndexSlideTemplate.ui.js腳本環境中去請求數據，并在Http的請求成功事件中將數據綁定給一個ListData組件，再讓ListView去綁定該數據，同時復位pull或push出來的頭部。（需要注意的是，這里直接將請求到的數據綁定給ListView組件，所以需要前后臺溝通好數據格式，在后臺保存時也是用JSON Array。）
因為ListView是支持多模版的，這里我們給ListView組件綁定兩個模板，一個用于展示新聞列表newsRowTemplate0.ui，一個用于展示輪播圖片newsRowTemplate1.ui。這兩個模板也同樣在模板頁的根節點上調用setMapping方法定義好數據映射關系，這樣數據與模板就結合起來了，在ListView上就能顯示我們從后臺請求到的數據了。
這里提一個小的處理，因為我們不確定要展示的數據到底有多少個字節，全部展示要占用多大的空間，所以我們設置ListView的模板頁中要展示數據的Label的高度為-1，表示自動高度，并且將maxLines屬性設置為2，表示最多只顯示兩行，這樣就能控制每個cell顯示數據的空間都是固定高度的，數據能整齊排列。
另外一個小處理就是讓圖片顯示的速度更快，因為所有圖片都是網絡圖片，顯示之前都會先去請求，這樣在網絡環境不穩定時可能會導致圖片顯示框先出現默認圖片（設置defaultImage）再顯示真正要顯示的圖片。這里只需要簡單的設置ImageView的cacheType為temporary，表示第一次加載圖片時就緩存到本地，以后每次打開這個ImageView都會先讀緩存的本地圖片，然后再讀服務器的網絡圖片，這樣就能優化ImageView的加載速度，從而提高體驗。
刷新新聞
想要在ListView頁面上向下pull和向上push操作中獲取新的數據并重新顯示在模板中，首先要設置ListView的isFooterVisible和isHeaderVisible屬性為true，這樣上下拉的時候使頭部和尾部可見，再分別在ListView的pull和push事件中去重新請求數據，并且在http請求的success事件中調用ListView的rebound方法讓頭部或尾部復位。
九宮格展示
最后，我們說一下第三張效果圖中點擊“+”號會彈出一個快速選擇新聞類型的UI界面如何實現。
首先畫出需要彈出的UI頁面newsTypeGrids.ui，也如之前教程中處理彈出Picker頁面一樣，在該頁面中只放一個GridView組件，其他地方設置成灰色半透明效果。再設置GridView的模板頁newsTypeGridTemplate.ui，同樣定義好數據映射，將之前給SegmentView定義的數據源也復制一份讓GridView綁定上，最后只需要在“+”號的touch事件中讓newsTypeGrids.ui顯示出來即可。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49825.html
摘要：訂閱事件，在其中做更新數據的操作需要特殊注意的是，自定義事件的訂閱和觸發可以不在同一個頁面的腳本環境中完成，只需要保證自定義事件的觸發在訂閱之后即可。 本節教程將介紹如何用DeviceOne簡單而高效的完成一個新聞頁面。 導入項目數據模板分離MVVM模型自定義事件展示新聞九宮格展示將要學習的demo效果圖如下所示showImg(https://segmentfault.com/img/...
摘要：本節教程將繼續帶領大家完善教學導入項目完善主框架完成子視圖打開新頁啟動動畫將要學習的效果圖如下所示如何導入完整項目本節示例請參考下載地址，可以導入到設計器中學習。完成子視圖接下來我們來完成需要展示的子視圖。 本節教程將繼續帶領大家完善教學demo 導入項目完善主框架完成viewShower子視圖打開新頁啟動動畫將要學習的demo效果圖如下所示showImg(https://segmen...
摘要：本節教程將繼續帶領大家完善教學導入項目完善主框架完成子視圖打開新頁啟動動畫將要學習的效果圖如下所示如何導入完整項目本節示例請參考下載地址，可以導入到設計器中學習。完成子視圖接下來我們來完成需要展示的子視圖。 本節教程將繼續帶領大家完善教學demo 導入項目完善主框架完成viewShower子視圖打開新頁啟動動畫將要學習的demo效果圖如下所示showImg(https://segmen...
摘要：時間永遠都過得那么快，一晃從年注冊，到現在已經過去了年那些被我藏在收藏夾吃灰的文章，已經太多了，是時候把他們整理一下了。那是因為收藏夾太亂，橡皮擦給設置私密了，不收拾不好看呀。 ...
閱讀 720·2021-11-24 10:30
閱讀 1254·2021-09-24 09:48
閱讀 3074·2021-09-24 09:47
閱讀 3588·2019-08-29 17:11
閱讀 2875·2019-08-29 15:38
閱讀 2270·2019-08-29 11:03
閱讀 3594·2019-08-26 12:15
閱讀 1008·2019-08-26 10:45
