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. Scrum Meeting NO.10

    Scrum Meeting No.10 1.会议内容 2.任务清单 徐越 序号 近期的任务 进行中 已完成 1 "我"回答过的问题 -- 界面 √ 2 "问题" ...

  2. Linux内核分析:期中总结

    第一章:计算机是如何工作的 计算机大部分都是用冯诺依曼体系结构,即存储程序计算机. 两个层面: 1.硬件: cpu(IP寄存器:指针,指向内存的某块区域)——总线——内存(代码与数据) 2.程序员: ...

  3. warning C4996: 'strcpy': This function or variable may be unsafe.

    mkdir 写成  _mkdir strcpy 写成为 strcpy_s 或是在项目处右击-->属性-->C/C++-->预处理器-->在预处理器定义后添加";_CR ...

  4. 思甜雅---关于qq的NABCD的模型分析

    个人连接:http://www.cnblogs.com/xiaoliulang/ 关于QQ的NABCD模型 N--Need 随着电脑的普及,人们在网络上进行交流的时间越来越多,由于现有的交流工具还不是 ...

  5. 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 ...

  6. 面象对象设计原则之二:开放封闭原则(Open-Closed Principle, OCP)

    开闭原则是面向对象的可复用设计的第一块基石,它是最重要的面向对象设计原则.开闭原则由Bertrand  Meyer于1988年提出,其定义如下: 开闭原则(Open-Closed Principle, ...

  7. linux_压缩解压命令(zip/tar)

    一.zip 1.压缩 格式 $ zip (选项) (文件/目录) 选项 -r 参数表示递归打包包含子目录的全部内容. -q 参数表示为安静模式,即不向屏幕输出信息. -o 表示输出文件,需在其后紧跟打 ...

  8. mysql学习笔记三 —— 数据恢复与备份

    要点: 1.存储引擎2.导入导出3.备份与恢复 查看当前数据库中的所有表use db1:show tables: 1.存储引擎 不同的发动机(引擎)适用的汽车类型不一样. 存储和处理的不同方式.不同的 ...

  9. caffe实现多任务学习

    Github: https://github.com/Haiyang21/Caffe_MultiLabel_Classification Blogs  1. 采用多label的lmdb+Slice L ...

  10. ansible系列7-mysql_user模块

    添加mysql的用户和权限.密码 新增mysql用户zhang,设置登录密码zhang,给予权限zabbix.*:ALL ansible dba -m mysql_user -a 'login_hos ...