artTemplate模板引擎学习（json的key字符串两端不能有空格）

文章参考：

http://www.jq22.com/jquery-info1097/

 

最近在工作中写了一个树形结构，数据是自己设计的:

 

var fomat = {    "机构ID_1": {      "orgId": 机构ID,      "orgName"机构名字,      "users": {        "用户ID_1":{          "id ": 用户ID,          "leaderId ": 汇报人ID,          "leaderName ":汇报人名字,          "postId ": 职位ID,          "postName ": 职位名字        },        "用户ID_2":{          "id ": 用户ID,          "leaderId ": 汇报人ID,          "leaderName ":汇报人名字,          "postId ": 职位ID,          "postName ": 职位名字        }      }    },    "机构ID_2": {      "orgId": 机构ID,      "orgName"机构名字,      "users": {        "用户ID_1":{          "id ": 用户ID,          "leaderId ": 汇报人ID,          "leaderName ":汇报人名字,          "postId ": 职位ID,          "postName ": 职位名字        },        "用户ID_2":{          "id ": 用户ID,          "leaderId ": 汇报人ID,          "leaderName ":汇报人名字,          "postId ": 职位ID,          "postName ": 职位名字        }      }    }  };

 

使用artTemplate 模板引擎做数据解析，但是怎么解析都有问题，最后把数据拉到本地，发现在本地使用正常，

 

在浏览器中调试，先将json对象转为字符串，然后再转为JSON对象，也显示正常。

 

最后使用debug调试，发现是因为数据的key最后有一个空格，把key的空格去掉之后，页面显示正常了。

 

模拟数据，数据格式转换的代码如下:

 

[{      "avatar": "http://default.jpg",      "id": 20770003,      "leaderId": 20760000,      "leaderName": "aaaaaa",      "name": "bbbbbbbb",      "orgId": 681,      "orgName": "3333333",      "postId": 700,      "postName": "分公司经理"    }  ];// 格式化用户的信息  function formatUserInfo(){    var userCount = allUserJons.length;    var result = {};    for(var i=0;i < userCount; i++){      // 从数据库获取的用户信息      var userInfo = allUserJons[i];      // 如果找不到这个机构ID，则需要新建      if(result[userInfo.orgId] == undefined){        // 机构对象        var orgObj = {};        // 机构ID        orgObj["orgId"] = userInfo.orgId ;        orgObj["orgName"] = userInfo.orgName ;        //机构下面的员工        orgObj["users"] = {};        //机构下面具体的员工        var tempUser = {};        // 用户信息        tempUser["id"] = userInfo.id ;        tempUser["leaderId"] = userInfo.leaderId ;        tempUser["leaderName"] = userInfo.leaderName ;        tempUser["postId"] = userInfo.postId ;        tempUser["postName"] = userInfo.postName ;        // 记录机构员工        orgObj["users"][userInfo.id] = tempUser;        result[userInfo.orgId] = orgObj;      }      // 如果招到了员工      else{        // 机构对象        var orgObj = result[userInfo.orgId];        //机构下面具体的员工        var tempUser = {};        // 用户信息        tempUser["id"] = userInfo.id ;        tempUser["leaderId"] = userInfo.leaderId ;        tempUser["leaderName"] = userInfo.leaderName ;        tempUser["postId"] = userInfo.postId ;        tempUser["postName"] = userInfo.postName ;        // 记录机构员工        orgObj["users"][userInfo.id] = tempUser;      }    }    return result;  }  var abc = formatUserInfo();  console.dir(abc);

 

使用模板引擎的代码如下：

 

<!--  汇报关系模板  --><script type="text/html" id="reportRelationTemplate">{{each orgsData as orgName i}}<li class="item" id="{{orgName.orgId}}"><div class="menu-header">{{orgName.orgName}}</div><!-- 非展开状态 --><div class="menu-body"><ul class="clearfix">{{each orgName.users as users i}}<li class="itemInfo" id="{{users.id}}"><p class="img"><img src="{{users.avatar}}" width="38" height="38" class="img-circle" /></p><p class="name">{{users.name}}</p><p class="position">{{users.postName}}</p><p class="icon-select"></p></li>{{/each}}</ul></div></li>{{/each}}</script>var data = res.data;var orgsData = formatUserInfo(data.list);console.log(orgsData);var data = {"orgsData" : orgsData};var html = template('reportRelationTemplate',data);