handlebars.js 自定义helper（过滤）
2024-08-24 12:28:33
- 将对象数据渲染到页面上；
- id 插入公共样式；
handlebars.js 自定义helper（过滤）demo
<script id="tbody-content-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{addOne @index}}</td>
<td>{{ChildName}}</td>
<td>{{genderVal Gender}}</td>
<td>{{birthdayVal Birthday}}</td>
<td>{{Height}}</td>
<td>{{Weight}}</td>
<td> {{SitReach}}</td>
<td>{{Balance}}</td>
<td>{{totalVal TotalScore}}</td>
<td>{{missDataVal MissDataType}}</td>
</tr>
{{/each}}
</script>
<tbody id="tableList"></tbody>
<script type="text/javascript">
var dataList=[];
var parameter = {
KindergartenId: kindergartenId
}
var url = "/test/checkData";
utilities.CallGetApi(url, parameter).done(function (data) {
dataList=data;
var contentHtml = Handlebars.compile($("#tbody-content-template").html());
$("#tableList").empty();
$("#tableList").append(contentHtml);
</script>
自定义helper
Handlebars.registerHelper('genderVal', function (value) {
return value == 1 ? "男" : "女";
});
Handlebars.registerHelper('birthdayVal', function (value) {
return value.CharpStr2Date();
});
Handlebars.registerHelper("addOne",function(index){
return parseInt(index)+1;
});
Handlebars.registerHelper('missDataVal', function(value) {
var missTypeVal = {
0: "已测完",
undefined: "未测试",
1: "因故缺席",
2: "测试中"
};
return missTypeVal[value];
});
Handlebars.registerHelper('totalVal', function (value) {
var gradeContent = "";
if (value > 31) {
gradeContent = "优秀";
} else if (value >= 28 && value < 31) {
gradeContent = "良好";
} else if (value >= 20 && value < 28) {
gradeContent = "合格";
} else {
gradeContent = "不合格";
}
return gradeContent;
});
Handlebars.js 模板引擎 | Ghost中文网
Handlebars.js 中文文档
纯属个人观点,仅供参考！
最新文章
- 配置apue的头文件apue.h和unp的头文件anp.h
- 导入镜像文件,分区启动liunx
- SkipList算法实现
- android之AlarmManager 全局定时器
- golang仿AS3写的ByteArray
- 201521123042 《Java程序设计》第3周学习总结
- RAID10与RAID01比较，RAID10与RAID5比较
- Spark Streaming入门
- RDIFramework.NET V3.3 Web版新增系统公告、系统新闻模块方便需要的客户
- Nginx访问控制
- Android测试（一）：在Android中测试App
- [UWP] 用 AudioGraph 来增强 UWP 的音频处理能力——AudioFrameInputNode
- myEclipse全局搜索时报错
- 通配符（WildCard）的使用
- 2018.10.31 vijos1052贾老二算算术（高斯消元）
- 很全面的WinRAR实用技巧系列 - imsoft.cnblogs
- LeetCode-Microsoft-Add Two Numbers II
- luogu P1025 数的划分
- ctci4.1
- scala学习手记15 - 独立对象和伴生对象