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 ...
随机推荐
- fatal error: Eigen3/Core: 没有那个文件或目录
解决方法: 在CMakeLists.txt文件里添加: include_directories("/usr/include/eigen3")
- MySQL保留字不能作为字段名使用
在设计MySQL字段的时候,无意中使用InOut这个名称作为字段名称,结果前端提交后就是没有写入数据库!但后端没有任何提示,跟踪mySQL日志,也没有留下痕迹,反复查,不得其解. 后来实在没有办法情况 ...
- python 中的__new__方法
1.有关__new__方法的介绍 __new__方法调用在构造方法构造实例之前,即在__init__方法执行之前,我们可以这样理解,他的作用是决定是否适用这个__iint__方法来构造实例,但是需要注 ...
- Burp插件开发——环境配置
最近打算开发个Burp插件,从网上各种地找资料学习.第一步就应该是环境配置,请见下文. (其实最重要的前提是你已经安装了Burp,否则下面的所有内容都是无稽之谈了. https://pan.baidu ...
- expect 批量自动部署ssh 免密登陆 之 二
#!/usr/bin/expect -f ########################################## hutu #Push the id.pas.pub public key ...
- Spring Boot 2 + MariaDB + HikariCP基础实例
在已有SpringBoot工程中基于MariaDB驱动使用HikariCP 连接池 环境:SpringBoot2.0.2 .MariaDB驱动版本2.2.3.HikariCP2.7.8 1.在Spri ...
- 后端api规范说明文档
我们此次后端api的实现主要是按照RESTful api规范来设计的,就是符合REST架构下设计api的规范.简单的来说REST结构就是:利用URL定位资源,用HTTP动词(GET,POST,PUT, ...
- tensorflow--交叉熵
学而不思则罔,思而不学则怠. 最近在看<TensorFlow 实战Google深度学习框架第二版>这本书.从头开始学习深度学习,对于细节方面进行探究.相当于重新拾起来这门”手艺“. 这篇随 ...
- selenium对百度进行登录注销
#百度登录退出demo import time from selenium import webdriver from selenium.webdriver.common.action_chains ...
- Linux telnet安装
为什么需要telnet? telnet就是查看某个端口是否可访问.我们在搞开发的时候,经常要用的端口就是 8080.那么你可以启动服务器,用telnet 去查看这个端口是否可用. Linux cent ...