JavaScript模板引擎Handlebars
Handlebars模板库简单介绍
Handlebars是JavaScript一个语义模板库，通过对view（模板）和data（ajax请求的数据，一般是json）的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译（先对view进行编译生成模板，之后只要把json数据套进去就行了），而不是到了客户端执行到代码时再去编译，这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。
Handlebars expressions是handlebars模板中最基本的单元，使用方法是加两个花括号{{value}}, handlebars模板会自动匹配相应的数值，对象甚至是函数。
当你想要复用模板的一部分，或者将长模板分割成为多个模板方便维护时，partials就派上用场了。
通过{{}}取出来的内容（把json的数据取到后，显示在模板中时），都会经过编码，也就是说，如果取出的内容中包含html标签，会被转码成纯文本，不会被当成html解析，实际上就是做了类似这样的操作：把<用<替代。这样做是很好的，既可以显示html代码（转码后的html），又可以避免xss注入（避免显示的内容是script，或者href，img等有跨站脚本攻击的标签）。这个功能在做代码展示的时候是非常有用的。但是有时候我们可能需要解析html，不要转码，很简单，把{{}}换成{{{}}}就可以啦。
Handlebars模板库简单使用
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="background: #ffffff; text-align: center;">
<table id="workTimeTable" width="100%" border="0" cellspacing="0" cellpadding="0" class="table table02 table-striped table-hover bdtp0 bdbtmDotted">
<thead>
<tr>
<th scope="col" width="35%">上班时间</th>
<th scope="col" width="35%">下班时间</th>
<th scope="col" width="30%">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" value="0" class="inputEdit02" name="onTime" readonly /></td>
<td>
<input type="text" value="1" class="inputEdit02" name="offTime" readonly /></td>
<td class="czTd">
<a href="javascript:void(0)" class="czTdAdd">
增加</a>
<a href="javascript:void(0)" class="czTdDelete">
删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
<!-- 建立模板 -->
<script type="text/x-handlebars-template" id="table-template">
{{#each conditions}}
<tr>
<td>
<input type="text" value="{{onTime}}" class="inputEdit02" readonly /></td>
<td>
<input type="text" value="{{offTime}}" class="inputEdit02" readonly /></td>
<td class="czTd">
<a href="javascript:void(0)" class="czTdAdd">
增加</a>
<a href="javascript:void(0)" class="czTdDelete">
删除</a>
</td>
</tr>
{{/each}}
</script>
<script src="jquery-1.10.2.min.js"></script>
<script src="handlebars-v3.0.1.js"></script>
<script type="text/javascript">
//模板data
var data;
//1.注册一个handlebars模板，通过id找到某一个模板，获取模板的html框架
var tableTemplate = Handlebars.compile($("#table-template").html());
$(function () {
//2.模拟的json对象
data = initTemplateData(data, "", "", "");
//初次加载
$("#workTimeTable tbody").append(tableTemplate(data));
data = initTemplateData(data, "", "", "");
//3.将json对象用刚刚注册的handlebars模板封装，得到最终的html,插入到基本的table中
$(document).off("click", ".czTdAdd");
$(document).on("click", ".czTdAdd", function () {
data = initTemplateData(data, "", "", "");
$("#workTimeTable tbody").append(tableTemplate(data));
});
//清除一行
$(document).on("click", ".czTdDelete", function () {
var leth = $(this).parents("table").find("tr").length;
if (leth == 2) {
$("#workTimeTable tbody").html("");
data = initTemplateData(data, "", "", "");
$("#workTimeTable tbody").append(tableTemplate(data));
return;
}
$(this).parents("tr").remove();
});
});
//模板data初始化
function initTemplateData(data, id, onTime, offTime) {
data = {
"conditions": [
{
"id": id,
"onTime": onTime,
"offTime": offTime
}
]
}
return data;
}
</script>
JavaScript模板引擎Handlebars的更多相关文章
- Javascript模板引擎handlebars使用实例及技巧
转:http://rfyiamcool.blog.51cto.com/1030776/1278620 我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文 ...
- Javascript模板引擎handlebars使用
源地址:http://rfyiamcool.blog.51cto.com/1030776/1278620 代码示例: <!DOCTYPE html> <html> <he ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- 推荐13款javascript模板引擎
javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- 【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎？
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- 最简单的JavaScript模板引擎
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...
- JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
随机推荐
- docker方式mysql设置字符集
在docker上部署mysql时,mysql的默认字符集是latin1,这样如果日后有中文会出现异常,不能存储等,因为latin1是不支持中文的. 所以需要将字符集调整为utf8. 方法: 首先启动m ...
- [工具开发] 分享两个基于Heapster 和 Influxdb 的 Grafana 监控仪表盘模板
Info Collector: Heapster - /heapster- --metric-resolution=30s- --sink=influxdb:http://influxdb.defau ...
- NBIoT三种部署方式【转】
转自:https://472880.kuaizhan.com/89/34/p441944286fccf2 本文作者:吴老司撩通信 本文来源:EETOP NB-IoT支持在频段内(In-Band).保护 ...
- OSG开源教程(转)
例:geom->addPrimitiveSet(new osg::DrawArrays(osg::PrimitiveSet::QUADS,0,4)); 来指定要利用这些数据生成一个怎么样的形状. ...
- I2C通信基本原理及其实现
I2C是一种总线式结构,它只需要SCL时钟信号线与SDA数据线,两根线就能将连接与总线上的设备实现数据通信,由于它的简便的构造设计,于是成为一种较为常用的通信方式. 由于I2C采用的是主从式通信方式, ...
- Harbor修改/data目录位置
由于harbor默认数据存储位置在/data目录,且修改配置文件操作较为复杂,故这里使用软连接的方式将/data目录文件夹内容映射到/app目录下. ln -s /app/harbor/data/ d ...
- C++中public/protect/private三种访问权限控制
一.成员访问权限控制 1.public (1)public成员变量可以被成员函数访问 [访问性] (2)public成员可以被实体对象访问 [访问性] (3)public成员可以成为子类成员 [ ...
- goland 文件头自动注释
1 代码 /** * @Author: ${USER} * @Description: * @File: ${NAME} * @Version: 1.0.0 * @Date: ${DATE} ${TI ...
- cocos2dx 开启控制台
打开 SimulatorWin.cpp 把这句启用: #define SIMULATOR_WITH_CONSOLE_AND_MENU 1 这句本来因为#define隐藏了
- identifier of an instance of **** was altered from **** to *****
在用hibernate getSession().save(entity)方法保存数据库表实体类的时候报这个异常 我的需求是一个请求要往数据库表插两条数据,根据传值判断做了for循环调两次save() ...