JS模板引擎handlebars.js的简单使用
handlebars.js的使用
首先我们要明白handlebars.js是干什么用的，我们知道使用jsp很麻烦，
于是我们开始使用freemarker等模板引擎，但这个只是针对服务器端来解
析的，那么有没有一种模板引擎可以在前端实现呢，
这个当然有，就是我们现在要了解的handlebars。
在什么情况下使用handlebars
答： 针对前端开发，比如做ajax的时候，原来我们使用JQuery的load方法加载页面，
现在我们只需要有json数据过来就行了，这样减少了服务端的鸭梨，哈哈。
或者是你在做一些界面上的应用，总之将计算交到客户端这是非常可取的方式。
github地址：https://github.com/wycats/handlebars.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="handlebars.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><title>handlebars.js 模板引擎学习 by 雨林博客</title></head><body><div id="content">摸板引擎测试 by 雨林博客</div><br/>标题: <input id="title" /><br/>内容: <input id="body" /><br/><button onclick="show();">显示模板内容</button><!-- 模板数据 --><script id="content-template" type="text/x-handlebars-template"><div> <h1>{{title}}</h1> <div> {{body}} </div></div></script><script type="text/javascript">function show(){ var source = $("#content-template").html();//获取模板内容 var template = Handlebars.compile(source);//返回模板编译对象，接下来可以传递参数 //编写模板中要绑定的json数据，属性对应着模板中的变量 var context = {title: $("#title").val(), body: $("#body").val()}; var html = template(context); $("#content").html(html);}</script></body></html> |
执行效果：
来源：http://www.yl-blog.com/index.php/js/85.html
JS模板引擎handlebars.js的简单使用的更多相关文章
- JS 模板引擎 Handlebars.js 中文说明
Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Han ...
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- 关于模板引擎handlebars.js基本用法
说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...
- js模版引擎handlebars.js实用教程——each嵌套
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——关于HTML编码
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- js模版引擎handlebars.js实用教程——如何引入Handlebars.js
返回目录 Jquery插件,第一步当然要引用Jquery啦,然后引用Handlebars.js即可,仅仅需要这两个js文件. <script type="text/javascript ...
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
随机推荐
- 1023 C. Bracket Subsequence
传送门 [http://codeforces.com/contest/1023/problem/C] 题意 n字符串长度,k要求的字符串的长度,字符串只包含'('和')',而且这两种的数量相等,要求的 ...
- 对PS的评价
Photoshop(简称:PS)是电脑上的图像处理软件:对于广大Photoshop爱好者而言,PS亦用来形容通过该类图形处理软件处理过的图片,即非原始.非未处理的图片:多数人对于这软件的了解仅限于“一 ...
- Genymotion安装总结
周末的时候为了测试论文中的Almond虚拟助手软件,所以要去Google Play上去下载. 但是我的两个安卓模拟器:夜神和海马玩模拟器的安卓版本太低了,导致无法使用 谷歌服务,所以连商店都进不去. ...
- XShell+Xmanager实现在XShell中显示远程服务器的图形界面
http://blog.csdn.net/linghao00/article/details/8768435
- GS使用HTTPS登录的设置过程
1. Windows 增加角色服务 服务器配置管理器, 添加角色服务 增加角色功能里面有: 证书颁发机构 证书颁发机构 web注册 2. AD CS配置 主要是next操作 独立ca 根证书 等 3. ...
- 将字符串以用二进制流的形式读入XML文件
其实将字符串写入XML文件本身并不复杂,这里只是写一些需要注意的地方,特别是编码格式,这里需要的是XML默认的编码方式是UTF-8,在对字符串进行编码的时候一定要注意, string strRecei ...
- loadrunner基础学习笔记二
virtual user generator(vugen) 在测试环境中,loadrunner在物理计算机上使用vuser代替实际用户.vuser以一种可重复.可预测的方式模拟典型用户的操作,对系统施 ...
- 计算机cpu、寄存器、内存区别
1.寄存器是中央处理器内的组成部份.它跟CPU有关.寄存器是有限存贮容量的高速存贮部件,它们可用来暂存指令.数据和位址.在中央处理器的控制部件中,包含的寄存器有指令寄存器(IR)和程序计数器(PC). ...
- BZOJ2008 JSOI2010连通数（floyd+bitset）
一直不明白为什么要用floyd求传递闭包,直接搜不是更快嘛……不过其实可以用bitset优化,方法也比较显然.bitset是真的神奇啊,好多01状态且转移相似的东西都可以用这个优化一下. #inclu ...
- Sigma Function LightOJ - 1336 （约数和为奇数）
题意: 求1-n中约数和为偶数的数的个数 记住一个定理:...平方数 及其 平方数的2倍 的约数和为奇数 then....减啦 证明: ....我jiao着人家写的很详细,so 看看人家写的吧! 转 ...