案例
因为公司业务需要频繁调用接口，后端返回的都是json树对象，需要有些特殊的方法做大量判断和数据处理，显然目前简单语法已经不能满足业务需要了，需要自己定制一些
方法来处理业务逻辑。
例如后台返回的的json对象结构如下：
//数据
var data = {
<span style="white-space:pre"> </span>time: 1408536771253,
queryRecord:{
queryHistory:{
overdue:[],
query:{time:'100'},
name:'fdsafdsa'
}
}
};我想在页面显示的效果有数据时如下:
查询结果：逾期日期为 N ，预期次数为 N 次，查询次数为 N 次， 名字为：xxx没有数据时，显示如下：
查询结果：查询成功，无记录使用目前现有artTemplate的简单语法，如下:
{{if queryHistory==null || queryHistory.length==0|| queryHistory.overdue==null || queryHistory.overdue.length.length==0||queryHistory.query==null || queryHistory.query.length==0||queryHistory.name ==null || queryHistory.name.length==0}}
查询结果：查询成功，无记录
{{else}}
查询结果为：逾期时间为{{queryHistory.ovedue.date}}，逾期次数为{{queryHistory.ovedue.time}},查询次数为{{queryHistory.query.time}},名字为:{{queryHistory.name}}{{/if}}解决方案
我通过自定义一个函数去根据我业务需要去做判断，那样我就不需要在页面写大量代码了，只要我输入一个Json对象，它就给我返回是否有属性为空即可
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>helper-demo</title>
<script src="../dist/template.js"></script>
<script src="../dist/jquery-2.1.4.js"></script>
</head>
<body>
<h1>辅助方法</h1>
<div id="content"></div>
<script id="test" type="text/html">
{{if hasEmptyProperties(testData)}}
查询成功，无该用户
{{else}}
查询该成功：xxx
{{/if}}
</script>
<script>
//递归需要用到的变量
var exit = false;
var isExist = false;
/**
*对指定Json对象遍历其属性判断是否存在空值，只要存在空属性就代表无效对象,返回false
* <pre>
* Json对象1: testData:{
* queryHistory:{
* array:[],
* query:{},
* name:'fdsafdsa'
* }
* Json对象2: testData:{
* queryHistory:{
* overtime:[],
* query:{time:'100'},
* name:'fdsafdsa'
* }
* Json对象3: testData:{
* queryHistory:{}
* }
* 在模板输入： {{if isValidObject(testData)}}
* 返回： true;
*
*
* </pre>
*@Param data 要进行校验的Json对象
*@Param args Json对象中的属性参数
*@author liangyh
*/
template.helper("hasEmptyProperties",function(data){
var isInvalid = false;
isInvalid = isExistEmptyProperties(data);
//维护全局变量
exit = false;
isExist = false;
return isInvalid;
});
function isExistEmptyProperties(data) {
//中止执行当前递归
if(exit==true){
return isExist;
}
if (typeof data == "object") {
if ($.isEmptyObject(data)) {
isExist = true;
exit=true;//满足条件，退出递归
} else {
$.each(data, function (k, v) {
// k is either an array index or object key
isExist=isExistEmptyProperties(v);
});
}
}
else {
// jsonOb is a number or string
if($.isEmptyObject(data)){
isExist=true;
exit=true;//满足条件，退出递归
}
}
return isExist;
}
//数据
var data = {
time: 1408536771253,
testData:{
queryHistory:{
overtime:[],
query:{time:'100'},
name:'fdsafdsa'
}
}
};
var html = template('test', data);//渲染模板
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
页面输出结果如下：
