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. xcode archive 去掉dsym文件和添加dsym文件

    打包慢,让人发狂!!! 所以我们尝试的去掉一些测试时候用不到的东西 比如DSYM: 这DSYM是收集奔溃的.在测试的时候不需要这些东西的所以去掉就好: 项目  Build Settings -> ...

  2. Linux内核分析 笔记七 可执行程序的装载 ——by王玥

    一.预处理.编译.链接和目标文件的格式 (一)可执行程序是怎么得来的? 1. 2.可执行文件的创建——预处理.编译和链接 shiyanlou:~/ $ cd Code                  ...

  3. Proxy 示例

    package cn.proxy03; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; imp ...

  4. 个人github链接及git学习心得总结

    个人github链接 https://www.github.com/liangjianming/test git学习心得总结​ git是一个快速,开源,分布式的版本控制系统. GitHub是一个基于w ...

  5. 用户模拟+spec

    用户模拟:用户模拟的对象分别为小学二年级学生,学生父亲以及小学教师. 名字 孔小颖 性别 男 职业 小学生 收入 来自父母给予 知识层次和能力 小学二年级 生活/工作情况 在学校上课,数学成绩较差,放 ...

  6. Tor源码阅读与改造（一）

    0x00 前言 由于公司需求,需要掌握洋葱网络的整体架构和部分详细实现细节,并对Tor进行针对性的改造.在查询Tor官方相关文档和google各种网站后,得到的信息仍无法达到目的,所以便开始了阅读To ...

  7. [微软官网]windows server 内存限制

    Memory Limits for Windows and Windows Server Releases https://docs.microsoft.com/zh-cn/windows/deskt ...

  8. [转帖] .NET FrameWork 版本的确定方法

    检测电脑安装的net framework版本   https://msdn.microsoft.com/en-us/library/hh925568(v=vs.110).aspx To find .N ...

  9. number （2）编译错 （类的大小写错误） Filewriter cannot be resolved to a type

    没找到所使用的类所在的类定义,一般常见于使用了外部jar中的类,但有对应的import语句.比如,如果程序中使用了ArrayList这个类,但你程序类文件的最开始import部分如果没有import  ...

  10. Delphi通过查找字符定位TADOQuery数据的位置

    通过TADOQuery的方法Locate,输入字符,查找到定位到对应的数据位置,优点快速定位,缺点是只匹配查找到的和第一个位置,无法连续定位下一个! //定位qrymembertype.Locate( ...