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 ...
随机推荐
- 通过scrollTop，使子元素滚动至指定位置
想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...
- 基于Python的Webservice开发(二)-如何用Spyne开发Webservice
一.功能需求 本次案例是开发一个Item的新建的WebService.IN&OUT的类型JsonDocument. 通过传入相关的参数创建Item,且相关的参数可以被缺省. 二.实现代码 引入 ...
- 2018-2019-2 网络对抗技术 20165325 Exp1 PC平台逆向破解
2018-2019-2 网络对抗技术 20165325 Exp1 PC平台逆向破解(BOF实验) 实验有三个模块: (一)直接修改程序机器指令,改变程序执行流程: (二)通过构造输入参数,造成BOF攻 ...
- GX/GZOI2019 day2 解题报告
GX/GZOI2019 day2 解题报告 题目链接 逼死强迫症 旅行者 旧词 t1 逼死强迫症 显然地,记 \(f(i)\) 为长度为 \(i\) 的木板的答案,可得: \(\\\) \[f(i)= ...
- 题解-Codeforces917D Stranger Trees
Problem \(\mathrm{Codeforces~917D}\) 题意概要:一棵 \(n\) 个节点的无向树.问在 \(n\) 个点的完全图中,有多少生成树与原树恰有 \(k\) 条边相同,对 ...
- python学习第31天
# 操作系统的发展历程 # 主要的人机矛盾是什么 : CPU的使用率 # 输入\输出数据和CPU计算没有关系 # 操作系统是怎么进化的 # 传统的纸带输入 # 磁带的存储降低了输入输出数据占用的时间, ...
- 如何在html显示当前时间
下边那个是一直快速跳转的 <!doctype html> <html> <head> <meta charset="utf-8"&g ...
- C语言中return 0和return 1和return -1
转载声明:本文系转载文章 原文作者:十一月zz 原文地址:https://blog.csdn.net/baidu_35679960/article/details/77542787 1.返回值int ...
- python之地基（三）
一.引用计数和垃圾回收机制 当一个执行程序完毕后,回收变量所占据的内存. 当引用计数变为0的时候,回收变量所占据的内存. a=100 print(id(a)) a=input('==>:') # ...
- 关于解决微信支付sdk中NoClassDefFoundError: Failed resolution of: org.apache.http.conn.ssl.DefaultHostnameVerifier;
导入依赖<dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>ht ...