kendo listview 从服务器读取数据时加载菊花图(loading...)解决方案.

这是第一篇blog,, 本人语文作文都不及格的,,,记性也越来越不好,

想通过写blog,,以后项目遇到的问题可以翻起来看看.,,

这里将记录我成长过程遇到的各种问题,

----------------------------正文-----------------------

项目主要框架:requirejs+jq+kendo

功能需求: 在读取数据时加载个菊花图,,加载完成在隐藏菊花图,,这里的菊花图指ajax 读取数据时,,等待过程中显示 显示loading..这个小图片

遇到的问题: 数据在读取的过程中,菊花图没有显示,.

解决过程:

起初认为是页面在未加载完时,js就showloading菊花图了,导致页面显示了,菊花图又被隐藏了.

后通过代码排除,(愚蠢而有点效的方法),即是通过删除部分代码,慢慢排除是那个代码导致菊花图被隐藏了,

其实比较有效率的方法是通过断点调试.

通过代码排除,导致隐藏菊花图是在listview设置数据源的时候,把页面的loader给隐藏了.

问题出在这里, $("#mainlistview").data("kendoMobileListView").setDataSource(context.viewModel.dataLuggages);

为什么知道是他把loader给隐藏掉呢,,我是通过控制台一个小办法,,这个大伙可以学习学习哈.

看到木有,,然后再通过断点再到this.loader.show的位置,,在this.loader.show()下加断点,单步调试就进去了show()的方法下,

4351加个断点,就可以了.

控制台执行$("#mainlistview").data("kendoMobileListView").setDataSource(dataLuggages);

就会进去4351这个断点.所以就可以确定listview在设置数据源时,触发了loader.hide()了.

那么如何解决是好呢,这也让愚蠢的我想了好久..如何在读取数据完时在让listview绑定数据源呢,

1.datasource有个requeststart这个方法,,在这个方法中设置loader.show()无效,

2.ajax读取数据时,设置loader,show()无效.

3...尝试好多..

最后问题能解决还是挺幸运的,

我的kendo版本从2013年升级到2014年,,最后升级到2015年..

13,14年在调试ios的时候.输入框对焦有问题.所以就干脆升级到最新版本.

新版本的read才有用deferred.具体是到那个版本,自己去查看下源码,下面我有介绍,

先贴下解决成功的代码

这里的datasourceLuggages是项目需求,把他又简单封装了一次,,其实就是个datasource.

这里为什么能像到用deferred的这个,done办法呢,还是得力于控制台小技巧,查看了read这个方法,,发现这个方法也是用deferred做处理的

(注意这里有resoleve().promise()等方法)

,

在read读完在处理listview绑定数据源,,ok..菊花图出现了...嗨嗨森