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树结构。

上一篇:Putty远程登录VMware虚拟机Linux(Ubuntu12.04)


下一篇:C# winform窗体在桌面右下角显示(任务栏上方)