Niep.js - Web移动端无刷新页面切换 -- 页面数据加载
2016-05-26 16:53
961 查看
页面显示时,加载数据
页面的数据均通过ajax获取,当页面需要显示时,会搜索该页面中的所有data-unload的元素,如果data-unload的值为once或refresh,则执行data-cmd指定的方法,该方法为自定义方法,用于请求数据或操作DOM。
data-unload参数
该参数有两个值,once、refresh 。 once限定仅执行一次data-cmd指定的方法,refresh表示每次当前页面显示之前,都会执行一次data-cmd指定的方法。以下为示例代码:
上述代码中,data-cmd指定的query_subject方法,是用于查询学员个人学习进度的,对于学员用户而言,这个信息会随时发生改变,所以在用户关闭网页之前,需要多次查询请求最新数据,所以设置data-unload的值为refresh,每次显示该页面时,均执行一次query_subject()方法。
上面的代码中,data-cmd指定的info_coach()方法,是用于查询教练个人信息的,对于用户而言,教练个人信息不会短时间内发生变动,所以在用户关闭网页之前,仅请求一次数据即可,所以设置data-unload的值为once,仅执行一次info_coach()方法。
data-cmd参数
data-cmd的值,用于指定页面显示时执行的加载数据或操作DOM方法,该方法为自定义方法。可选参数有两个:component、params。component是调用该cmd方法的DOM对象,params是本页面接收的参数。
data-cmd命名规范
该方法用于数据查询加载或者操作DOM,多为查询类方法。
查询列表类方法,应添加“list_”前缀,如list_service()方法,该方法用于加载服务列表数据。
查询对象类方法,应添加“info_”前缀,如info_user方法,该方法用于加载用户个人信息数据。
其他查询类方法,应添加“query_”前缀,如query_subject()方法,该方法用于加载用户学习进度数据。
其他操作类方法,可添加“save_”、“update_”等前缀。
!!【请求路径一致原则】:该方法下,如果使用ajax请求数据,请求路径为list/coach则方法名应为list_coach,即方法名与路径名保持一致。
data-cmd方法中,两个重要的可调用的方法
post()
post()方法用于发送ajax请求,接收两个参数,第一个参数是请求数据时向服务器传递的参数,第二个是请求成功时,回调函数。
当你自定义的data-cmd方法的方法名符合“请求路径一致原则”时,方可使用component.post()来发送ajax请求。否则请使用jquery的$.post()方法,自定义请求的url。
finished()
finished()方法用于添加data-cmd方法执行完毕标记,以便页面内所有的data-cmd方法都执行完毕后,loading完成,页面方可显示。每一个data-cmd方法执行完毕,需要页面显示时,务必调用一下该方法。否则页面不会显示。
ajaxFinished()方法是一个自定义方法,代码如下:
在使用ajax请求成功时,执行完自定义的success()方法后会执行一次component.finished()方法。
数据的填充
在初始化Niep.init()方法时,可以设置开始和结束标签。
设置完成以后,我们在页面中可以使用这个标签来向页面输出数据。
值得一提的是:host是一个全局变量,网站的根路径。你可以在任何需要填充数据的地方使用它。
其他的任何一个数据字段,向页面输出时,直接使用”N.字段名.P”来渲染即可。
对于图片资源,需要将图片的url放入data-loading中,如果有默认图片,则设置data-default。当data-loading为空时,加载默认图片。还可以在data-add中设置url的附加参数,当data-loading不为空时,data-add即可拼接到data-loading后面,然后加载图片资源。
列表类数据的加载方法
list()
当我们通过ajax获取到list的数据后,可以使用list()方法,将list数据添加到html中进行遍历,第二个参数为每一个item的处理函数,在这个方法中,你可以写对每一个baseObj的处理方法,index是当前的baseObj所属的序号。list()方法需要配合组件结构来使用。
页面的数据均通过ajax获取,当页面需要显示时,会搜索该页面中的所有data-unload的元素,如果data-unload的值为once或refresh,则执行data-cmd指定的方法,该方法为自定义方法,用于请求数据或操作DOM。
<div data-unload="refresh" data-cmd="query_subject"> </div>
data-unload参数
该参数有两个值,once、refresh 。 once限定仅执行一次data-cmd指定的方法,refresh表示每次当前页面显示之前,都会执行一次data-cmd指定的方法。以下为示例代码:
<div data-unload="refresh" data-cmd="query_subject"> </div>
上述代码中,data-cmd指定的query_subject方法,是用于查询学员个人学习进度的,对于学员用户而言,这个信息会随时发生改变,所以在用户关闭网页之前,需要多次查询请求最新数据,所以设置data-unload的值为refresh,每次显示该页面时,均执行一次query_subject()方法。
<div data-unload="once" data-cmd="info_coach"> </div>
上面的代码中,data-cmd指定的info_coach()方法,是用于查询教练个人信息的,对于用户而言,教练个人信息不会短时间内发生变动,所以在用户关闭网页之前,仅请求一次数据即可,所以设置data-unload的值为once,仅执行一次info_coach()方法。
data-cmd参数
function list_coach(component , params){ }
data-cmd的值,用于指定页面显示时执行的加载数据或操作DOM方法,该方法为自定义方法。可选参数有两个:component、params。component是调用该cmd方法的DOM对象,params是本页面接收的参数。
data-cmd命名规范
该方法用于数据查询加载或者操作DOM,多为查询类方法。
查询列表类方法,应添加“list_”前缀,如list_service()方法,该方法用于加载服务列表数据。
查询对象类方法,应添加“info_”前缀,如info_user方法,该方法用于加载用户个人信息数据。
其他查询类方法,应添加“query_”前缀,如query_subject()方法,该方法用于加载用户学习进度数据。
其他操作类方法,可添加“save_”、“update_”等前缀。
!!【请求路径一致原则】:该方法下,如果使用ajax请求数据,请求路径为list/coach则方法名应为list_coach,即方法名与路径名保持一致。
data-cmd方法中,两个重要的可调用的方法
post()
function info_coach(component,params){ var postJson = {id : params} ; component.post(postJson , function(result){ }); }
post()方法用于发送ajax请求,接收两个参数,第一个参数是请求数据时向服务器传递的参数,第二个是请求成功时,回调函数。
当你自定义的data-cmd方法的方法名符合“请求路径一致原则”时,方可使用component.post()来发送ajax请求。否则请使用jquery的$.post()方法,自定义请求的url。
finished()
function valide_code(ts,params){ ts.fill({mobile:params}); //判断数据加载完成,页面显示 ts.finished(); }
finished()方法用于添加data-cmd方法执行完毕标记,以便页面内所有的data-cmd方法都执行完毕后,loading完成,页面方可显示。每一个data-cmd方法执行完毕,需要页面显示时,务必调用一下该方法。否则页面不会显示。
function info_coach(component,params){ var postJson = {id : params} ; component.post(postJson , function(result){ component.ajaxFinished( result , function(){ //..do something }); }); }
ajaxFinished()方法是一个自定义方法,代码如下:
$.fn.ajaxFinished = function(result , success){ var component = this ; var status = result.status ; if(status == '200'){ //数据请求成功 success(result); component.finished(); }else if(status == '100'){ //需要登录 NP_component.login(); }else{ //返回错误信息 alert(result.message); } };
在使用ajax请求成功时,执行完自定义的success()方法后会执行一次component.finished()方法。
数据的填充
在初始化Niep.init()方法时,可以设置开始和结束标签。
Niep.init({ start : 'N.' , end : '.P' })
设置完成以后,我们在页面中可以使用这个标签来向页面输出数据。
<div data-unload="once" data-cmd="list_service" > <a href="#page_serviceInfo" data-react="toggle" data-params="N.id.P"> <img src="" data-loading="N.photo_url.P" data-default="N.host.P/images/default.png" style="max-height:155px"/> </a> </div>
值得一提的是:host是一个全局变量,网站的根路径。你可以在任何需要填充数据的地方使用它。
其他的任何一个数据字段,向页面输出时,直接使用”N.字段名.P”来渲染即可。
对于图片资源,需要将图片的url放入data-loading中,如果有默认图片,则设置data-default。当data-loading为空时,加载默认图片。还可以在data-add中设置url的附加参数,当data-loading不为空时,data-add即可拼接到data-loading后面,然后加载图片资源。
列表类数据的加载方法
list()
component.list( listData , function(baseObj , index){ })
当我们通过ajax获取到list的数据后,可以使用list()方法,将list数据添加到html中进行遍历,第二个参数为每一个item的处理函数,在这个方法中,你可以写对每一个baseObj的处理方法,index是当前的baseObj所属的序号。list()方法需要配合组件结构来使用。
<div data-unload="once" data-cmd="list_service" > <a href="#page_serviceInfo" data-react="toggle" data-params=""> <img src="" style="max-height:155px"/> </a> </div>
相关文章推荐
- OC(Objective-C)学习笔记(二)--终端运行多OC程序
- Android apk动态加载机制的研究
- android weakreference内存进行优化
- 全面介绍Android的MVVM框架 - 数据绑定
- iOS 简单计算文件Cache的大小(项目中用了IASKAppSettingsViewController,一个设置界面的库)
- android 插件开发
- Android中Canvas的常用方法
- 【android】:android之四大组件详解
- MyEclipse 安装 Vrapper 插件
- app首页新解读:如何设计总有一款你喜欢的首页
- Android样式的开发:shape
- Android 调用Js方法, js回调Android方法
- 怎样在android各级打印backtrace
- Android动画-Interpolator(插值器)大全
- iOS-获得设备型号
- iOS开发 JSPatch实现热跟新及热修复
- android 源代码编译
- Android自定义View仿微博运动积分动画效果
- tableview线条距屏幕的距离
- iOS应用性能调优的25个建议和技巧