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=" ...
随机推荐
- Scrum Meeting NO.10
Scrum Meeting No.10 1.会议内容 2.任务清单 徐越 序号 近期的任务 进行中 已完成 1 "我"回答过的问题 -- 界面 √ 2 "问题" ...
- Linux内核分析:期中总结
第一章:计算机是如何工作的 计算机大部分都是用冯诺依曼体系结构,即存储程序计算机. 两个层面: 1.硬件: cpu(IP寄存器:指针,指向内存的某块区域)——总线——内存(代码与数据) 2.程序员: ...
- warning C4996: 'strcpy': This function or variable may be unsafe.
mkdir 写成 _mkdir strcpy 写成为 strcpy_s 或是在项目处右击-->属性-->C/C++-->预处理器-->在预处理器定义后添加";_CR ...
- 思甜雅---关于qq的NABCD的模型分析
个人连接:http://www.cnblogs.com/xiaoliulang/ 关于QQ的NABCD模型 N--Need 随着电脑的普及,人们在网络上进行交流的时间越来越多,由于现有的交流工具还不是 ...
- Solution of wireless link "PCI unknown" on Centos 7.1
Pick From http://www.blogjava.net/miaoyachun/archive/2015/09/17/427366.html After Centos 7.1 tobe in ...
- 面象对象设计原则之二:开放封闭原则(Open-Closed Principle, OCP)
开闭原则是面向对象的可复用设计的第一块基石,它是最重要的面向对象设计原则.开闭原则由Bertrand Meyer于1988年提出,其定义如下: 开闭原则(Open-Closed Principle, ...
- linux_压缩解压命令(zip/tar)
一.zip 1.压缩 格式 $ zip (选项) (文件/目录) 选项 -r 参数表示递归打包包含子目录的全部内容. -q 参数表示为安静模式,即不向屏幕输出信息. -o 表示输出文件,需在其后紧跟打 ...
- mysql学习笔记三 —— 数据恢复与备份
要点: 1.存储引擎2.导入导出3.备份与恢复 查看当前数据库中的所有表use db1:show tables: 1.存储引擎 不同的发动机(引擎)适用的汽车类型不一样. 存储和处理的不同方式.不同的 ...
- caffe实现多任务学习
Github: https://github.com/Haiyang21/Caffe_MultiLabel_Classification Blogs 1. 采用多label的lmdb+Slice L ...
- ansible系列7-mysql_user模块
添加mysql的用户和权限.密码 新增mysql用户zhang,设置登录密码zhang,给予权限zabbix.*:ALL ansible dba -m mysql_user -a 'login_hos ...