案例


因为公司业务需要频繁调用接口,后端返回的都是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变量作为退出递归的标志


页面输出结果如下:





artTemplate--模板使用自定义函数(1)的更多相关文章

  1. 在ecshop模板使用自定义函数

    https://blog.csdn.net/shaolinld/article/details/46400485 在ecshop模板使用自定义函数 可以增加自定义函数,在模板直接调用,例如: {$us ...

  2. 四、smarty模板的自定义函数

    smarty模板的自定义函数(这里介绍的是常用) 分为三个种类: 1.  变量调节器 2.  函数 3.  块函数 三个种类插件的用法: 1.  变量调解器的用法, <{$var|myfun:a ...

  3. 模板语言 自定义函数simple_tag

    模板语言自带的一些处理函数:通过管道符来处理 帮助方法:{{ item.event_start|date:"Y-m-d H:i:s"}}  转换成日期时间型{{ bio|trunc ...

  4. art-template自定义函数

    自定义函数 // 百分比计算 template.defaults.imports.percentage = function (num1, num2) { var res; if(!num1 & ...

  5. Thinkphp模板怎么使用自定义函数

    内置模板引擎支持对模板变量使用函数,并支持多个函数同时使用. 注意:自定义函数要放在项目应用目录/common/common.php中. 这里是关键. 模板变量的函数调用格式:{$varname|fu ...

  6. Thinkphp模板中使用自定义函数的方法

    注意:自定义函数要放在项目应用目录/common/common.php中. 这里是关键. 模板变量的函数调用格式:{$varname|function1|function2=arg1,arg2,### ...

  7. thinkphp模板中使用自定义函数

    注意:自定义函数要放在项目应用目录/common/common.php中. 这里是关键. 模板变量的函数调用格式:{$varname|function1|function2=arg1,arg2,### ...

  8. 模板自定义函数 template function

    sqlite3中的日期默认是UTC,当日期字段的默认值是CURRENT_TIMESTAMP时,这个日期和北京时间CST少了8小时. 网上建议说数据库里用UTC,读取数据时再转换为当地时间. web页面 ...

  9. django 笔记8 url模板 自定义函数 simple_tag

    感谢alex老师~ 知识点: URL - 两个没见 url>路由系统> 函数或类 > 返回字符串 Form表单提交: 提交 >url>函数或类中的方法 -.. HttpR ...

  10. 五,Smarty模板技术/引擎——自定义函数机制

    自建函数是smarty提供的函数,不允许修改,只能被调用: 自定义函数是自己编写函数,注册成为smarty的函数,之后可以被调用: 示例:使用smarty自定义函数的机制,编写一个函数myfun1,通 ...

随机推荐

  1. 调用微软未公开ZwQueryInformationThread函数根据线程句柄获取线程ID

    这段时间公司项目中为了支持XP系统同事代码中用到了 GetThreadId 这个微软的API 但是这个API最低支持版本是 Windows version Windows Vista [desktop ...

  2. 类加载器在Tomcat中的应用

    之前有文章已经介绍过了JVM中的类加载机制,JVM中通过类加载加载class文件,通过双亲委派模型完成分层加载.实际上类加载机制并不仅仅是在JVM中得以运用,通过影响字节码生成和类加载器目前已经有了许 ...

  3. bash shell-linux的预设shell

    1.bash 是GNU 计划中重要的工具软件之一,目前也是Linux distributions 的标准shell.其主要功能如下: (1)命令记忆和历史功能,可以通过history查询,存储位置在~ ...

  4. [白话解析] 深入浅出 极大似然估计 & 极大后验概率估计

    [白话解析] 深入浅出极大似然估计 & 极大后验概率估计 0x00 摘要 本文在少用数学公式的情况下,尽量仅依靠感性直觉的思考来讲解 极大似然估计 & 极大后验概率估计,并且从名著中找 ...

  5. 【转】c#中数组赋值方法

    C#中数组复制有多种方法,数组间的复制 ,,,};int [] alias = pins; 这里出了错误,也是错误的根源,以上代码并没有出错,但是根本不是复制,因为pins和alias都是引用,存在于 ...

  6. DZNEmptyDataSet框架阅读

      前段时间使用公司封装的空白页占位视图工具,工具是对DZNEmptyDataSet框架的封装.这个框架以前在许多项目也都用过,却没有认真阅读过源码,真的很遗憾.这两天趁五一放假有空,将DZNEmpt ...

  7. 论Java中的抽象类与接口

    目录 抽象类和抽象方法 定义 与普通类的区别以及注意点: 抽象类的作用 接口 定义 示例 注意 作用 最后:接口与抽象类的异同 使用场景 借鉴 抽象类和抽象方法 定义 抽象方法和抽象类都必须被abst ...

  8. ubuntu pycharm、idea创建快捷方式

    编辑/usr/share/application/pycharm.desktop [Desktop Entry] Type=Application Name=Pycharm GenericName=P ...

  9. 19徐州网络赛E 线段树加离散化

    题目链接:https://nanti.jisuanke.com/t/41387 按wi的值建立权值线段树维护值为wi出现的最后位置,对于第i个人的答案,查询线段树[wi+m,max]区间的最大位置po ...

  10. HTTP图解笔记(六)—— 第6章 HTTP首部

    前言 为啥第一章直接跳到第六章呢,因为...博主当初看书的时候挑着看..只看了第一章和第六章┗( ▔, ▔ )┛ HTTP图解对于不熟悉HTTP的小伙伴来说是很好的书籍,建议入手! 一. HTTP报文 ...