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 ...
随机推荐
- 查看提交历史（git log）
git log 命令 在完成了几次提交,或者克隆了一个已有提交历史的仓库后,要查看历史提交记录,可以通过git log命令来实现. $ git log commit 0becea8e1966df258 ...
- 第十四节，OpenCV学习（三）图像的阈值分割
图像的阈值处理 图像的阈值分割:图像的二值化(Binarization) 阈值分割法的特点是:适用于目标与背景灰度有较强对比的情况,重要的是背景或物体的灰度比较单一,而且总可以得到封闭且连通区域的边界 ...
- 【转载】Centos7修改root密码
参考: https://blog.csdn.net/wcy00q/article/details/70570043 知道root密码,需要修改密码 以root登录系统输入passwd命令默认修改roo ...
- webpack4学习笔记
执行webpack-dev-server的时候不会自动生成dist打包目录,怪不得公司的项目里面都没用到webpack-dev-server呢 执行webpack的时候会生成dist目录 watch的 ...
- Union 与 Union all 的区别【坑】
UNION操作符用于合并两个或多个SELECT语句的结果集 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SELECT 语句中的列的顺序必 ...
- .net core WebAPI 初探及连接MySQL
1. 前言 笔者最近跟着微软官方文档学习.net core WebAPI,但发现其对 WebAPI 连接数据库.读取数据库方面讲得不够细致明了.写此文的目的,即实现 .net core WebAPI ...
- Luogu 3371【模板】单源最短路径
Luogu 3371[模板]单源最短路径 第一次写博客用图论题来试一试 接下来是正文部分 题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包 ...
- Android 使用gradle版本冲突
gradle默认版本冲突解决策略:自动依赖最高版本jar包 修改默认解决策略,使之出现版本错误时报错 configurations.all{ resolutionStrategy{ failOnVer ...
- git在项目中的实际运用
项目中只运用git版本管理的情况下: 1.创建分支命令: git branch (branchname) 切换分支命令: git checkout (branchname) 当你切换分支的时候,Git ...
- python爬虫之如何随机更换User-Agent
python爬虫爬取网站内容时,如果什么也没带,即不带报头headers,往往会被网站管理维护人员认定为机器爬虫.因为,此时python默认的user-agent如Python-urllib/2.1一 ...