Niep.js - Web移动端无刷新页面切换 -- 页面数据加载

页面显示时，加载数据

页面的数据均通过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>