• 将对象数据渲染到页面上;
  • 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 中文文档


纯属个人观点,仅供参考!

handlebars.js 自定义helper(过滤)的更多相关文章

  1. js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  2. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  3. handlebars自定义helper的写法

    handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性,我个人特别喜欢.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式 ...

  4. js模版引擎handlebars.js实用教程——另一种Helper用法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  5. handlebars自定义helper方法

    handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性,我个人特别喜欢.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式 ...

  6. Handlebars的使用方法文档整理(Handlebars.js)

    Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; Handlebars.js和 ...

  7. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  8. Handlebars.js 模板引擎

    介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less template"(无逻辑模 ...

  9. Handlebars.js,Json+ajax+拼html

    英文版:http://handlebarsjs.com./ 原文链接:http://www.cnblogs.com/diligenceday/p/4105229.html, http://segmen ...

随机推荐

  1. Java引用类型转换

    java的引用类型转换分为两种: 向上类型转换,是小类型到大类型的转换 向下类型转换,是大类型到小类型的转换 现存在一个Animal动物类,猫子类和狗子类继承于Animal父类: 1 public c ...

  2. select for update引发死锁分析

    本文针对MySQL InnoDB中在Repeatable Read的隔离级别下使用select for update可能引发的死锁问题进行分析. 1. 业务案例 业务中需要对各种类型的实体进行编号,例 ...

  3. Xpath语法-爬虫(一)

    前言 这一章节主要讲解Xpath的基础语法,学习如何通过Xpath获取网页中我们想要的内容;为我们的后面学习Java网络爬虫基础准备工作. 备注:此章节为基础核心章节,未来会在网络爬虫的数据解析环节经 ...

  4. 采用spring的schedule注解配置定时任务

    1 在springmvc配置文件中新增以下配置 <!-- 此处对于定时时间的配置会被注解中的时间配置覆盖,因此,以注解配置为准 --> <task:scheduled-tasks s ...

  5. 实现图片旋转木马3D浏览效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. php 非对称加密解密类

    <?phpnamespace app\Parentclient\model;header("Content-Type: text/html;charset=utf-8");/ ...

  7. 树莓派设置NTP同步

    pi@raspberrypi:~ $ sudo timedatectl set-ntp true--------------启用NTPpi@raspberrypi:~ $ date           ...

  8. Qt 获取文件夹下所有文件

    Qt 获取文件夹下所有文件代码如下: QStringList getFileNames(const QString &path) { QDir dir(path); QStringList n ...

  9. Qt读取文件时中文乱码问题

    在默认情况下,Qt 以 Unicode 格式处理文本字符,因此,字符本身是不会有问题的.之所以出现乱码,原因在于 Qt 不知道将 Unicode 字符以何种方式显示出来.        文本文件含有简 ...

  10. Spark笔记-DataSet,DataFrame

    DataSet:面向对象的,从JVM进行构建,或从其它格式进行转化 DataFrame:面向SQL查询,从多种数据源进行构建,或从其它格式进行转化 RDD DataSet DataFrame互转 1. ...