js数据动态绑定

这是以前项目开发中用的JS-AJAX-JSON动态数据绑定

databind.js源码

 

// JavaScript Document
//定义解析类
function DataBind(){};
//扩展类型
var extend_obj = {};
//给解析类增加变量与方法
DataBind.prototype={
    selectList   : new Array(),
    radioList    : new Array(),
    lineNum      : 0,
    oddLineClass : "",
    evenLineClass: "",
    templateTxt  : "",
    isForm       : false,
    setLineClass    :  function(oddClass,evenClass)
    {
       this.oddLineClass=oddClass;
       this.evenLineClass=evenClass;
    },
    setTemplateTxt  :  function(id)
    {
        var temp=document.getElementById(id);
        if(temp)
          this.templateTxt=temp.innerHTML;
        this.lineNum=0;
    },
    setForm         :  function()
    {
        this.isForm=true;
    },
    getResultHtml   :  function(data,templateHtml,type)
    {
        var cdomhtml=templateHtml;                         //取绑定模板内容
        var cdomhtmllen = cdomhtml.length;                 //模板长度
        var beginchar = "@{";                              //起始字符
        var endchar = "}";                                 //结束字符
        var endchar_t = "}";
        var start = -1;                                    //查找的开始位置
        while(start<cdomhtmllen)
        {
           var startflag = cdomhtml.indexOf(beginchar,start+endchar_t.length);       //查找起始标志
               if(startflag<0) break;
           var endflag = cdomhtml.indexOf(endchar, startflag + beginchar.length);    //查找结束标志 
               if(endflag<0) break;
           var fieldName = cdomhtml.substring(startflag+beginchar.length,endflag);                 //字段标志,起始标志占两位，所以起始位置为startflag+2
           if(fieldName!="")
               {
                   var result = "";
                   if(type=="list")
                      result=this.replaceField(data,fieldName);
                   if(type=="form")
                      result=this.replaceForm(data,fieldName);
                   cdomhtml = cdomhtml.replace(beginchar+fieldName+endchar,result);         
               }
            start = startflag;                                                         //重置搜索起始位置
            cdomhtmllen = cdomhtml.length;                                           //重置模板长度(模板内容经替换内容已改变)
        }
        return cdomhtml;                                                             //返回模板替换结果
    },   
       
    replaceField   :   function(data,fieldname)
    {
        var separateFlag = "|";                                                     //定义分隔符(用于返回对象的扩展）
        var fieldSeparateFlag = ",";                                                //定义多重字段分隔符
        var result="";
        var separateArr = fieldname.split(separateFlag);                          //分隔对象成数组
        var extendFlag = separateArr.length>1?true: