摘要：订阅事件，在其中做更新数据的操作需要特殊注意的是，自定义事件的订阅和触发可以不在同一个页面的脚本环境中完成，只需要保证自定义事件的触发在订阅之后即可。
本节教程将介绍如何用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显示出来即可。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/49825.html
摘要：订阅事件，在其中做更新数据的操作需要特殊注意的是，自定义事件的订阅和触发可以不在同一个页面的脚本环境中完成，只需要保证自定义事件的触发在订阅之后即可。 本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面。 导入项目数据模板分离MVVM模型自定义事件展示新闻九宫格展示将要学习的demo效果图如下所示showImg(https://segmentfault.com/img/...
摘要：本节教程将继续带领大家完善教学导入项目完善主框架完成子视图打开新页启动动画将要学习的效果图如下所示如何导入完整项目本节示例请参考下载地址，可以导入到设计器中学习。完成子视图接下来我们来完成需要展示的子视图。 本节教程将继续带领大家完善教学demo 导入项目完善主框架完成viewShower子视图打开新页启动动画将要学习的demo效果图如下所示showImg(https://segmen...
摘要：本节教程将继续带领大家完善教学导入项目完善主框架完成子视图打开新页启动动画将要学习的效果图如下所示如何导入完整项目本节示例请参考下载地址，可以导入到设计器中学习。完成子视图接下来我们来完成需要展示的子视图。 本节教程将继续带领大家完善教学demo 导入项目完善主框架完成viewShower子视图打开新页启动动画将要学习的demo效果图如下所示showImg(https://segmen...
摘要：时间永远都过得那么快，一晃从年注册，到现在已经过去了年那些被我藏在收藏夹吃灰的文章，已经太多了，是时候把他们整理一下了。那是因为收藏夹太乱，橡皮擦给设置私密了，不收拾不好看呀。 ...
阅读 701·2021-11-24 10:30
阅读 1231·2021-09-24 09:48
阅读 3058·2021-09-24 09:47
阅读 3557·2019-08-29 17:11
阅读 2859·2019-08-29 15:38
阅读 2254·2019-08-29 11:03
阅读 3577·2019-08-26 12:15
阅读 990·2019-08-26 10:45
