handlebars模板引擎使用初探1
谈到handlebars,我们不禁产生疑问,为什么要使用这样的一个工具呢?它究竟能为我们带来什么样的好处?如何使用它呢?
一、handlebars可以干什么?
首先,我们来看一个案例:
有这样的html结构:
<div class="demo">
<h1>name</h1>
<p>content</p>
</div>
这个结构会在html文件中反复使用,并且每次h1和p标签的内容都不同。
一种常见的做法是:
每次都写一遍该结构。
这样难免显得过于繁琐!
我们是否可以将html结构提取出来,每次传入不同的值来达到目的呢?
当然可以,这便是handlebars模板引擎的最简单的应用。
二、handlebars环境配置
要使用handlebars,首先是要引入handlebars。
例如,我们要在index.html文件中使用handlebars,可以通过cdn用script标签引入:
<script src="https://cdn.bootcss.com/handlebars.js/4.0.11/handlebars.min.js"></script>
也可以下载handlebars,然后用script标签引入,如:
<script type="text/javascript" src="./handlebars.js"></script>
三、模板、expressions
handlebars声称模板引擎,显然它的使用离不开模板。就像下面这样:
<script type="text/x-handlebars-template" id="tpl">
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
</script>
首先我们使用了一个script标签,并将type属性设置为"text/x-handlebars-template"
,这表明我们声明了一个handlebars模板,这个模板的id为"tpl"。
你可能不知道{{name}}和{{content}}的意思,这是handlebars的expressions,形如{{value}}。handlebars模板会自动匹配{{value}},并将其替换为value的值,value可以是对象甚至是函数。
你可能产生疑问:这里,模板中的name和content从何而来呢?
的确,在使用handlebars模板的时候,需要为模板传入name和content的值,后文我们再详述。
我们已经发现,handlebars模板是一个script标签,我们如何将其插入HTML中呢?
四、编译、渲染
为了将handlebars模板插入HTML,我们在index.html的body标签中输入如下代码:
(为了简化操作,我们在以下代码之前先引入了jquery。)
<script type="text/javascript">
var obj={name:'lsz',content:'handlebars is good!'};//定义一个对象用于存放需要插入模板的数据
var t=$('#tpl').html();//获取到handlebars模板,并将其中的html代码转换成html字符串,t是字符串
console.log(t);
var f=Handlebars.compile(t);//使用handlebars对转换后的html字符串进行编译,f是函数
console.log(f);
var h=f(obj);//将obj作为参数传入f函数,实现将数据插入模板之中,h是html字符串
console.log(h);
$('body').html(h);//将插入数据后的html字符串转换为dom元素,插入到body元素中,
</script>
由此我们总结出使用handlebars模板的步骤:
1、通过dom操作获取handlebars模板;
2、对handlebars模板进行编译,得到函数;
3、给函数传入参数并运行;
4、将函数返回值插入dom。
我们可以封装一个函数专门用于渲染:(也是在安装了jquery的情况下)
function renderTemplate(templateSelector,data,htmlSelector) {
var t=$(templateSelector).html();
var f=Handlebars.compile(t);
var h=f(data);
$(htmlSelector).html(h);
}
前面我们已经谈到函数的参数传值是按值传递,对于以上的函数,我们可能产生疑问:
templateSelector、htmlSelector仅仅得到传入字符串的副本,data得到的是传入对象的内存地址的副本,是否真能影响dom树结构呢?
答案是显然的,这是因为:
虽然templateSelector、htmlSelector的确得到字符串副本,但实际起作用的是函数内部的jquery语句,jquery语句通过templateSelector、htmlSelector的值获取了dom元素,故而会影响dom树结构。
handlebars模板引擎使用初探1的更多相关文章
- Handlebars模板引擎中的each嵌套及源码浅读
若显示效果不佳,可移步到愚安的小窝 Handlebars模板引擎作为时下最流行的模板引擎之一,已然在开发中为我们提供了无数便利.作为一款无语义的模板引擎,Handlebars只提供极少的helper函 ...
- Handlebars模板引擎之高阶
Helpers 其实在Handlebars模板引擎之进阶我想说if else的功能的,可是由于这个功能在我的开发中我觉的鸡肋没啥用,就直接不用了. 因为if else只能进行简单判断,如果条件参数返回 ...
- Handlebars 模板引擎之前后端用法
前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- express-9 Handlebars模板引擎(2)
视图和布局 视图通常表现为网站上的各个页面(它也可以表现为页面中AJAX局部加载的内容,或一封电子邮件,或页面上的任何东西).默认情况下,Express会在views子目录中查找视图.布局是一种特殊的 ...
- express-8 Handlebars模板引擎(1)
简介 使用JavaScript生成一些HTML document.write('<h1>Please Don\'t Do This</h1>'); document.write ...
- Handlebars模板引擎之上手
handlebars Handlebars,一个JavaScript模板引擎,是基于Mustache的扩展.模板引擎的都存在一个上下文环境,这是它的作用区间. 需求:基本使用 需要的库 <scr ...
- Handlebars模板引擎之进阶
取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...
- 【转】在Express项目中使用Handlebars模板引擎
原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...
随机推荐
- C++头文件中的模板类
C++头文件中的模板类 这已经是我的第三篇关于头文件的博客了,没想到我还是踩了个巨坑. 大家都知道要在头文件里声明类成员,在源文件中实现. 但是今天写数据结构作业,在头文件(Stack.h)定义了一个 ...
- shell使用特殊变量
shell使用特殊变量 3.1问题 本例要求编写一个脚本/root/myuse ...
- 创建一个tar备份包
创建一个tar备份包 2.1问题 本例要求使用tar工具完成以下备份任务: 创 ...
- C语言把浮点数转换为字符串
目录 1.把float/double格式化输出到字符串 2.注意事项 3.版权声明 1.把float/double格式化输出到字符串 标准的C语言提供了atof函数把字符串转double,但是没有提供 ...
- django-生产和测试环境分离
django-生产和测试环境分离 在settings.py的同级目录下新建settings的文件夹 在settings文件夹下新建 __init__.py base.py develop.py pro ...
- 【物理】AABB物理碰撞检测
什么是AABB? AABB,指轴对齐包围盒(Axis-aligned bounding boxes).在3D空间中,AABB是一个长方体,在2D空间中是一个长方形.特征是面法线皆平行于坐标轴,即当物体 ...
- MySQL入门,第六部分,关系代数
关系代数是一种集合操作为基础过程化查询语言,特点:运算对象是关系,运算结果亦为关系 一.关系代数的特点 运算对象:关系 运算结果:关系 运算符:四类 集合运算符 专门的关系运算符 算术比较符 逻辑运算 ...
- Linux网络安全篇,配置Yum源(二),阿里Yum源
官网教程: https://opsx.alibaba.com/mirror 1.下载配置文件到 /etc/yum.repos.d 目录 wget -O /etc/yum.repos.d/CentOS- ...
- 刨根问底系列(2)——stdin、stdout、FILE结构体、缓冲区和fflush的理解
stdin.stdout.FILE结构体.缓冲区和fflush理解 因为之前调试代码时, printf输出的字符串总是被截断了输出(先输出部分, 再输出剩余的), 当时调试了很久, 才知道问题所在, ...
- iOS技能 - 最新美团、百度、腾讯、头条、阿里 面试题目记录
关于面试题,可能没那么多时间来总结答案,有什么需要讨论的地方欢迎大家指教.主要记录一下准备过程,和面试的一些总结,希望能帮助到正在面试或者将要面试的同学吧. 美团 一面 1.简历上写的项目问了一遍,然 ...