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的简单使用的更多相关文章

  1. JS 模板引擎 Handlebars.js 中文说明

    Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Han ...

  2. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  3. 关于模板引擎handlebars.js基本用法

    说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...

  4. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  5. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  6. js模版引擎handlebars.js实用教程——关于HTML编码

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  7. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  8. js模版引擎handlebars.js实用教程——如何引入Handlebars.js

    返回目录 Jquery插件,第一步当然要引用Jquery啦,然后引用Handlebars.js即可,仅仅需要这两个js文件. <script type="text/javascript ...

  9. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. myeclipse快捷方式汇总

    选择你要注释的那一行或多行代码,按Ctrl+/即可,取消注释也是选中之后按Ctrl+/即可. 如果你想使用的快捷键的注释是的话,那么你的快捷键是ctrl+shift+/我以前都是手动注释的,直接打// ...

  2. Practise 5.2测试与封装（黑白盒

    本次测试与封装(黑白盒). 结伴队友:叶子鹏,他的博客地址:http://www.cnblogs.com/kazehanaai/ 由于我们的程序从一开始就一起弄的,所以测试的话不好换伙伴,所以我的伙伴 ...

  3. 【转】使用screw plus对PHP源码加密

    运行环境 ubuntu 14.04 php 5.6 源码地址 https://github.com/del-xiong/screw-plus http://git.oschina.net/splot/ ...

  4. Dynamic Routing Based On Redis

    Dynamic Routing Based On Redis Ngnix技术研究系列2-基于Redis实现动态路由   上篇博文我们写了个引子: Ngnix技术研究系列1-通过应用场景看Nginx的反 ...

  5. Notepad++和Sublime单词首字符大小写转化问题

  6. 【历史】- Windows NT 之父 - David Cutler

    David Cutler,大卫·卡特勒,一位传奇程序员,1988年去微软前号称硅谷最牛的内核开发人员,是VMS和Windows NT的首席设计师,被人们成为“操作系统天神”.他曾供职于杜邦.DEC等公 ...

  7. 注册鼠标右键CMD

    Windows Registry Editor Version 5.00 [-HKEY_CLASSES_ROOT\Directory\shell\runas] [HKEY_CLASSES_ROOT\D ...

  8. ELK日志框架（1）：安装Elasticsearch组建单服务器多节点集群

    ELK简介 最近有个需求搭建一套日志系统用于集成几个业务系统的日志提供快速的检索功能,目前是用Log4net存数据库+Error级别发邮件方式,也算简单暴力好用,但历史日志的模糊查询确实很慢,所以使用 ...

  9. 下载系统已经安装的rpm包

    下载系统已经安装的rpm包 yum -y install yum-utils 安装yum下载工具 yumdownloader mysql 用yum下载到当前目录 实例:查询mysql安装包[root@ ...

  10. node 和npm 版本更新

    node 版本更新 由于公司要用NG-ZORRO,于是我就跑到官网先看看demo,怎么构建项目,执行的过程中发现了问题 问题描述 执行官网构建项目命令 安装脚手架工具# $ npm install - ...