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. PHP中报500错误时如何查看错误信息

    在执行代码中加入下面两行代码即可 ini_set("display_errors","On"); error_reporting(E_ALL);

  2. bootstrap面试题

    1.你能描述一下渐进增强和优雅降级之间的不同吗? 优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作.由于IE独特的盒模型布局问题,针 ...

  3. 个人博客作业-Week2 (代码规范, 代码复审)

    代码规范: 1.这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 编码规范它包含了代码格式,还包括了编码风格和其他规范,通常涉及:缩进.空格使用.Tab使用 注释. ...

  4. 作业七：Linux内核如何装载和启动一个可执行程序

    作业七:Linux内核如何装载和启动一个可执行程序 一.编译链接的过程和ELF可执行文件格式 可执行文件的创建——预处理.编译和链接 在object文件中有三种主要的类型. 一个可重定位(reloca ...

  5. Python学习笔记 -- 第四章

    高阶函数 变量可以指向函数 f=abs f(-10) 10 变量f指向abs函数,直接调用abs()函数和调用f()完全相同 传入参数 变量可以指向函数,函数的参数可以接收另一个函数的参数,这种函数成 ...

  6. 重载(overload)、覆盖(override)、隐藏(hide)的区别

    http://blog.csdn.net/yanjun_1982/archive/2005/09/02/470405.aspx 重载是指不同的函数使用相同的函数名,但是函数的参数个数或类型不同.调用的 ...

  7. [BUAA2017软工]第1次个人项目 数独

    [BUAA软工]第1次作业 个人项目 数独 一.项目地址 github地址:https://github.com/BuaaAlen/sudoku 二.PSP表格 三.解题思路描述 在拿到这个题目时,我 ...

  8. RocketMQ事务消息实战

    我们以一个订单流转流程来举例,例如订单子系统创建订单,需要将订单数据下发到其他子系统(与第三方系统对接)这个场景,我们通常会将两个系统进行解耦,不直接使用服务调用的方式进行交互.其业务实现步骤通常为: ...

  9. VirtualBox 导入虚拟机时的注意事项 VDI 与VMDK

    1. 建议不要勾选  as vdi   vmdk 最好不过了.. 长个经验教训 以后尽量不勾选 vmdk 有很多工具能进行转换 vdi的 要麻烦一些.

  10. oracle11.2.0.1 deferred_segment_creation 造成exp imp 空表无法导出的问题

     oracle11g 新增加了 deferred_segment_creation 的属性在创建的数据库表中,如果表中没有数据,并且这个参数是true的话,并不是直接就在数据文件中的增加相应的segm ...