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. Java实验报告一：Java开发环境的熟悉

    实验要求: 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 实验内容 (一)   命令行下Java程序开发 (二)Eclipse下Java程序 ...

  2. 《蹭课神器》Alpha版使用说明

    <蹭课神器>是一款方便大学生蹭课的软件,目前实现了查询课表的功能,还没有实现搜索和提醒的功能.有待进一步的开发! 登录之后点击查询操作,查询课表. 课表显示如下

  3. 加载spring容器

    import org.springframework.context.ApplicationContext; import org.springframework.context.support.Cl ...

  4. CentOS查看版本及架构信息

    https://blog.csdn.net/shuaigexiaobo/article/details/78030008

  5. Selenium Grid的Java调用方法

    java -jar selenium-server-standalone-.jar -role hub explorer http://192.168.1.173:4444/grid/console ...

  6. Java singleton 一例

    org.springframework.beans.factory.support.DefaultListableBeanFactory - Returning cached instance of ...

  7. Docker(十五)-Docker的数据管理(volume/bind mount/tmpfs)

    Docker提供了三种不同的方式用于将宿主的数据挂载到容器中:volumes,bind mounts,tmpfs volumes.当你不知道该选择哪种方式时,记住,volumes总是正确的选择. vo ...

  8. MSTSC 3389 端口修改

    1. 启动注册表编辑器. 2. 找到并单击以下注册表子项: 3. HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Terminal Server ...

  9. php 7.1 openssl_decrypt() 代替 mcrypt_module_open() 方法

    公司开发微信第三方平台,之前用着一直是没有问题的.后来服务器到期进行项目搬迁就怎么也接收不到微信每10分钟的ticketle. 经过调试发现php版本由原来的7.0升到了7.1(该死....为什么没人 ...

  10. centos安装图形化界面

    用下面命令查看查看是哪个模式 systemctl get-default 开机启动图形界面 systemctl set-default graphical.target(图形界面模式) reboot( ...