JS模板引擎handlebars.js的简单使用
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的简单使用的更多相关文章
- JS 模板引擎 Handlebars.js 中文说明
Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Han ...
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- 关于模板引擎handlebars.js基本用法
说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...
- js模版引擎handlebars.js实用教程——each嵌套
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——关于HTML编码
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- js模版引擎handlebars.js实用教程——如何引入Handlebars.js
返回目录 Jquery插件,第一步当然要引用Jquery啦,然后引用Handlebars.js即可,仅仅需要这两个js文件. <script type="text/javascript ...
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
随机推荐
- BugPhobia开发篇章：Beta阶段第VIII次Scrum Meeting
0x01 :Scrum Meeting基本摘要 Beta阶段第八次Scrum Meeting 敏捷开发起始时间 2015/12/22 00:00 A.M. 敏捷开发终止时间 2015/12/22 23 ...
- Linux内核第三节 20135332武西垚
总结部分: Linux内核源代码: Arch 支持不同cpu的源代码:主要关注x86 Init 内核启动的相关代码:主要关注main.c,整个Linux内核启动代码start_kernel函数 K ...
- atcoder B - Frog 2 （DP）
B - Frog 2 Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Statement There a ...
- SpringMVC运行流称总结（DispatcherServlet-doDispatch）
1.运行流程 1).所有请求都是由前端控制器处理: 2).请求路径和RequestMapping进行对比, 3).找到就直接利用反射调用方法 4).把方法返回值作为页面地址,直接转发到这个页面: 四步 ...
- FZU软工第五次作业-词组频率分析
目录 00.前言: 01.分工: 02.PSP表格: 03.解题思路描述与设计实现说明: 解题思路简述: 关键代码 04.附加题设计与展示: 设计的创意独到之处 实现思路 实现成果展示 05.关键代码 ...
- PAT L1-027 出租
https://pintia.cn/problem-sets/994805046380707840/problems/994805107638517760 下面是新浪微博上曾经很火的一张图: 一时间网 ...
- Java并发—synchronized关键字
synchronized关键字的作用是线程同步,而线程的同步是为了防止多个线程访问一个数据对象时,对数据造成的破坏. synchronized用法 1. 在需要同步的方法的方法签名中加入synchro ...
- Oracle ORDS的简单SQL配置模板
1. 先加上简单的SQL配置模板. DECLARE PRAGMA AUTONOMOUS_TRANSACTION; BEGIN ORDS.ENABLE_SCHEMA(p_enabled => TR ...
- Linux 多主机SSH互信操作---noob....
创建虚拟机后-- ssh-keygen 生成公钥和私钥对 -rw------- 1 root root 1679 11月 4 09:18 id_rsa-rw-r--r-- 1 root root 39 ...
- hive-site.xml
https://cwiki.apache.org/confluence/display/Hive/AdminManual+MetastoreAdmin#AdminManualMetastoreAdmi ...