JqueryMobile地址選擇顯示問題

最近在做三級地址選擇,用的是JqueryMobile框架。省,市,區,爲三個獨立的頁面,出現的bug爲:第一次加載頁面的時候,所有地址列表都正常顯示,但是返回再次選擇地址的時候,只會出現省,市+區頁面不會顯示出來,並且有時候省市區會亂跳,看控制檯,獲取地址列表的接口也正常返回,所有問題出在綁定數據函數上。最後終於找到了答案,產生bug的原因有二;
1.我在省的列表做了兩次跳轉,導致跳轉錯亂。
2.應該聲明一下,在當前頁加載省的信息(這一點很重要,因爲jquerymobile爲單頁應用,即使爲頁面跳轉,其實都加載到了一個DOM中,只不過page不同。之前之一對這個不是特別敏感,自從出了這次bug後,知道了它的存在重要性。)
說了那麼多,還是貼代碼來的明白

var addAddressModel = {
    /*三級聯動*/
    "oneMenuList":function(){
        return shopAPI.DoAuthenticationPost("regionlist","type="+''+"&rid="+'');
    },
    one_menuAjax_data:'',
    getOneMenuListData:function(){
        one_menuAjax_data=addAddressModel.oneMenuList();
    },
    bindOneMenuListData:function(){
        var html='';
        for(var i=0;i<one_menuAjax_data.regionlist.length;i++) {
            html+='<li><a href="#" data-change-hash="false" data-transition="slide"  class="ui-btn ui-btn-icon-right ui-icon-carat-r" data-transition="slide" onclick="getCity_list('+one_menuAjax_data.regionlist[i].rid+',\''+one_menuAjax_data.regionlist[i].rname+'\')">'+one_menuAjax_data.regionlist[i].rname+'</a></li>';
        }
        $("#provincList").html(html);
    },
    "twoMenuList":function(rid){
        return shopAPI.DoAuthenticationPost("regionlist","type=2&rid="+rid);
    },
    two_menuAjax:'',
    getTwoMenuListData:function(rid){
        two_menuAjax=addAddressModel.twoMenuList(rid);
        console.log(two_menuAjax);
    },
    bindTwoMenuListData:function(obj,rname){
        var html='';
        proviceList=rname;
        for(var i=0;i<two_menuAjax.regionlist.length;i++){
            html+='<li><a href="#" data-change-hash="false" data-transition="slide"  class="ui-btn ui-btn-icon-right ui-icon-carat-r" data-transition="slide" onclick="getCounty('+two_menuAjax.regionlist[i].rid+',\''+two_menuAjax.regionlist[i].rname+'\')">'+two_menuAjax.regionlist[i].rname+'</a></li>';
        }
        obj.find("#city_list").html(html);

    },
    "threeMenuList":function(rid){
        return shopAPI.DoAuthenticationPost("regionlist","type=3&rid="+rid);
    },
    three_menuAjax:'',
    getThreeMenuListData:function(rid,rname){
        three_menuAjax=addAddressModel.threeMenuList(rid,rname);
    },

    "bindThreeMenuListData":function(obj,rname){
        var html='';
        proviceList+=rname;
        for(var i=0;i<three_menuAjax.regionlist.length;i++){
            html+='<li><a href="#" data-transition="slide" data-rid="'+three_menuAjax.regionlist[i].rid+'" class="ui-btn ui-btn-icon-right ui-icon-carat-r" onclick="get_county('+three_menuAjax.regionlist[i].rid+',\''+three_menuAjax.regionlist[i].rname+'\')">'+three_menuAjax.regionlist[i].rname+'</a></li>';
        }
        obj.find("#countryList").html(html);

    },
    /*修改,新增收貨地址*/
    "editorAddress":function(data,rid){
        return shopAPI.DoAuthenticationPost("address",data);
    },
    "returnNumber":'',
    "returnData":function(){
        returnNumber=addAddressModel.editorAddress();
    },
    "addressDataModel":function(aid){
        return shopAPI.DoAuthenticationPost("getaddress","aid="+aid);
    },
    "getAddress": function(aid){
        addressData= addAddressModel.addressDataModel(aid);
    },
    "bindAddress" : function(obj){
        var aid=addressData.aid;
        var aname=addressData.aname;
        var phone=addressData.phone;
        var zip=addressData.zip;
        var provincename=addressData.provincename;
        var cityname=addressData.cityname;
        var regionname=addressData.regionname;
        var address=addressData.address;
        var email=addressData.email;
        var identity=addressData.identity;
        var frontimg=addressData.frontimg;
        var backimg=addressData.backimg;
        var isprimary=addressData.isprimary;
        obj.find ("#aid").val(aid);
        obj.find("#aname").val(aname);
        obj.find('#phone').val(phone);
        obj.find('#zip').val(zip);
        obj.find("#falseregionid").val(provincename+cityname+regionname);
        obj.find("#address").val(address);
        obj.find("#email").val(email);
        obj.find("#identity").val(identity);
        obj.find("#frontimg").val(frontimg);
        obj.find("#backimg").val(backimg);
        obj.find("#isprimary").val(isprimary);
    },
    "clearAddress" : function(obj){
        obj.find("#aid").val("");
        obj.find("#aname").val("");
        obj.find('#phone').val("");
        obj.find('#zip').val("");
        obj.find("#falseregionid").val("");
        obj.find("#address").val("");
        obj.find("#email").val("");
        obj.find("#identity").val("");
        obj.find("#frontimg").val("");
        obj.find("#backimg").val("");
        obj.find("#isprimary").val("");
     }
};

/聯動菜單:一級/
$(document).delegate(‘#one_menu’,’pagebeforeshow’, function() {
addAddressModel.getOneMenuListData();
addAddressModel.bindOneMenuListData();
});
/聯動菜單:二級/
function getCity_list(rid,rname){
.mobile.changePage(‘thecity.html’,{data:”rid=”+rid+”&rname=”+rname,changeHash:false,reloadPage:true});  
}
(document).delegate(‘#two_menu’,’pagebeforeshow’,function(){
var page= (this);
var parameterurl = (this).data(url);varrid=getQueryStringValue(parameterurl,rid);varrname=getQueryStringValue(parameterurl,rname);console.log();addAddressModel.getTwoMenuListData(rid);addAddressModel.bindTwoMenuListData( page,rname);
});
/聯動菜單:三級/
function getCounty(rid,rname){
$.mobile.changePage(‘region.html’,{data:”rid=”+rid+”&rname=”+rname,changeHash:false,reloadPage:true});

}
(document).delegate(‘#three_menu’,’pagebeforeshow’,function(){  
    var
page = (this);varparameterurl= (this).data(“url”);
var rid = getQueryStringValue(parameterurl,”rid”);
var rname=getQueryStringValue(parameterurl,”rname”);
addAddressModel.getThreeMenuListData(rid,rname);
addAddressModel.bindThreeMenuListData($page,rname);
});
/聯動菜單:三級總和添加至input/
function get_county(rid,rname){
console.log(“應該返回增加收貨地址列表”);
proviceList+=arguments[1];
console.log(proviceList);
window.history.back();
(“#falseregionid”).val(proviceList).attr(‘value’,proviceList).prop(‘value’,proviceList); (“#regionid”).val(rid);
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章