artTemplate--模板使用自定义函数(1)

案例

因为公司业务需要频繁调用接口，后端返回的都是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}}

因为我不确定接口返回的数据是否有空值，我期望的结果应该是queryHistory下只要有属性是空的，我就希望显示最后查询结果为：“查询成功，无记录”，这样如果我使用原生的语法，我不得不做大量的判断，去判断我需要的属性是否会有空值，不然调用的时候会有异常

解决方案

我通过自定义一个函数去根据我业务需要去做判断，那样我就不需要在页面写大量代码了，只要我输入一个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>

注意：上面方法之所以用到全局变量，是因为我需要跳出递归，如果不使用全局变量去控制，那么递归时会导致每一个递归都会去执行，最后结果会有问题，因次我用到了一个exist变量作为退出递归的标志

页面输出结果如下：