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=" ...
随机推荐
- 浏览器跨域请求之credentials
-时间起源- 前段时间,需要弄个简单的网站出来,访问远程的api服务. 我是这么做的.首先是在搭建一个nodejs服务来运行前端页面.在我请求登录的时候,能成功返回相应的成功信息.然后,当我再次请求读 ...
- 结对项目 https://github.com/quchengyu/jiedui/tree/quchengyu-patch-1
所选项目名称:文本替换 结对人:傅艺伟 github地址 : https://github.com/quchengyu/jiedui/tree/quchengyu-patch-1 用一个新字 ...
- beta（3/7）
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 协助后端完成历史记录接口.美食排行榜接口 完成食堂平面图的绘制 确定web端业 ...
- eclipse新建maven项目，修改默认jdk版本
我们新建maven项目,默认jdk版本是1.5,我们可以修改成我们想要的版本,有两种方法 1每个项目修改,在pom.xml添加 <build> <plugins> <!- ...
- python中的文件读写（open()函数、with open('file_directory','r') as f:、read()函数等）
python中也有文件读写,通过调用内置的读写函数.可以完成文件的打开/关闭.读.写入.追加等功能. open()函数 open()函数为python中的打开文件函数,使用方式为: f = open( ...
- eclipse插件wordwrap
一行代码很长,浏览不方便,安装wordwrap可以自动折行. help->install new software-,在Workwith输入wordwrap - http://ahtik.com ...
- 面象对象设计原则之二：开放封闭原则(Open-Closed Principle, OCP)
开闭原则是面向对象的可复用设计的第一块基石,它是最重要的面向对象设计原则.开闭原则由Bertrand Meyer于1988年提出,其定义如下: 开闭原则(Open-Closed Principle, ...
- ThreadPoolExecutor使用详解
ThreadPoolExecutor机制 一.概述 1.ThreadPoolExecutor作为java.util.concurrent包对外提供基础实现,以内部线程池的形式对外提供管理任务执行,线 ...
- ubuntu美化 mac风格
安装tweak sudo apt install gnome-tweak-tool sudo apt install chrome-gnome-shell https://extensions.gno ...
- Python装饰器的深入理解
装饰器 #装饰器:本质上是函数,(装饰其他函数)就是为其他函数添加附加功能 #原则: 1.不能修改被装饰的函数的源代码 # 2.不能修改被装饰的函数的调用方式 #实现装饰器知识储备 #1.函数即变量 ...