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解析，实际上就是做了类似这样的操作：把<用&lt;替代。这样做是很好的，既可以显示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的更多相关文章

  1. Javascript模板引擎handlebars使用实例及技巧

    转:http://rfyiamcool.blog.51cto.com/1030776/1278620 我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文 ...

  2. Javascript模板引擎handlebars使用

    源地址:http://rfyiamcool.blog.51cto.com/1030776/1278620 代码示例: <!DOCTYPE html> <html> <he ...

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

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

  4. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  5. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  6. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  7. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  8. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  9. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

随机推荐

  1. Apache Spark 章节1

    作者:jiangzz 电话:15652034180 微信:jiangzz_wx 微信公众账号:jiangzz_wy 背景介绍 Spark是一个快如闪电的统一分析引擎(计算框架)用于大规模数据集的处理. ...

  2. C语言通讯录系统——C语言单向链表实现

    实现的通讯录功能有:查看通讯录.添加联系人.删除联系人.查询联系人.保存并退出. 通过txt文件保存和读取通讯录数据. #include <stdio.h> #include <st ...

  3. 使用Github时遇到问题的解决方法

    记录了一些我在使用Github时遇到问题的解决方法 git中报unable to auto-detect email address 错误的解决办法 问题描述: 执行 git commit -m &q ...

  4. Could not find a package configuration file provided by "Qt5Widgets"

    解决: sudo apt install qttools5-dev

  5. npx命令介绍

    什么是npx 第一次看到npx命令是在 babel 的文档里 Note: If you do not have a package.json, create one before installing ...

  6. Debian 无线网络切换问题解决方案

    sudo gedit /etc/NetworkManager/NetworkManager.conf 2: 添加 [device] wifi.scan-rand-mac-address=no 3:重启 ...

  7. The Ethereum devp2p and discv4 protocol Part I

    描述 本文章分上下两篇 上篇:讲述以太坊devp2p与disc4节点发现协议 下篇:实践篇,实现如何获取以太坊所有节点信息(ip,port,nodeId,client,type,os) 正文 devp ...

  8. mysql GTID

    之前一直通过binlog主从同步,现在发现GTID这种方式,记录一下,具体可参考网上教程.感觉配置使用更为简单方便,不知实际效果如何.

  9. 【easy】784. Letter Case Permutation

    Examples: Input: S = "a1b2" Output: ["a1b2", "a1B2", "A1b2", ...

  10. LNMP安装目录及配置文件位置

    LNMP相关软件安装目录 Nginx 目录: /usr/local/nginx/ MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/usr/local/mysql/v ...