Handlebars的使用方法及技巧

Templates
使用模板的方法只需引入handlebars库即可使用，通过两个大括号的方式将变量包含起来，对应的数据就会展示到定义好的模板中展示，这块如果碰上数据想解析成html代码时可使用三个大括号展示

<script type="text/template" id="my_tem"><div class="demo"><h1>{{name}}</h1><p>{{content}}</p><h2>{{food.like1}}</h2>{{{dom}}}</div>
</script>

对应的JS代码以及数据如下：

var data={name:'lx',content:'this is my first tml',food:{"like1":'tomato',"like2":'apple'},dom:"<div>直接解析</div>"};
let tpl=$("#my_tem").html();                 //获取模板内容
let template=Handlebars.compile(tpl);          //预编译模板
let html=template(data);                       //匹配数据
$("body").append(html);                       //插入到DOM

循环遍历#each
each方法如同js中的循环一样，遍历数据然后插入到模板中，each使用方法如下：

<script id="table-template" type="text/template">{{#each student}}<tr><td>{{addOne @index}}</td><td>ss{{name}}</td><td>{{sex}}</td><td>{{age}}</td></tr>{{/each}}</script><script type="text/javascript">var data = {"student": [{"name": "张三","sex": "0","age": 18},{"name": "李四","sex": "0","age": 22},{"name": "妞妞","sex": "1","age": 19}]};let  tpl=$("#table-template").html();let  template=Handlerbars.compile(tpl);let  html=template(data);Handlebars.registerHelper("addOne",function(index,options){return parseInt(index)+1;});$("body").append(html);</script>

Helper函数
在上面的代码中的addOne @index用来实现对table表格的一个序号标记，这块用到了Helpers功能函数，通过registerHelper方法来实现，具体的实现方式如代码可见，在模板中我们通常可以多次使用这个方法来对我们所需要的数据进行一个改变。

Handlebars的使用方法及技巧相关推荐

怎么判断网络回路_PLC控制回路故障的判断和检修方法与技巧！
点击蓝字关注我们有时我们关注的公众号消息比较多,错过了一些自己喜欢的消息,不能及时看到工控论坛的推送,我们可以给公众号加星标或置顶.那如何星标置顶呢?[打开一篇工控论坛公众号的文章,点击文章标题下 ...
JavaScript的方法和技巧
摘自http://www.cnblogs.com/Jamedy/archive/2007/02/14/650079.html 有些时候你精通一门语言,但是会发现你其实整天在和其它语言打交道,也许你以为 ...
软考程序员Java答题速成_软考程序员考试试题解答方法与技巧
如果说程序员考试解上午题无技巧可言的话,那么解下午题就是70%的实力加30%的方法与技巧,若运用到极致的话,会是"四两拨千斤".下面就来看一下程序员下午题解题步骤和解题技巧,以供考 ...
数据集的使用方法和技巧
数据集的使用方法和技巧数据集概述 1.1数据集 l 是一种代表关系数据的内存驻留结构 l 是以XML 形式表示的数据视图,是一种数据关系视图. l 在 ...
win10共享打印机怎么设置_小编为你叙述 win10系统网络共享理光打印机的设置方法的技巧介绍 -win10使用教程...
大家在操作win10系统电脑的过程中,经常会遇到小编为你叙述 win10系统网络共享理光打印机的设置方法的技巧介绍的情况,相信有太多的用户是不愿意遇到小编为你叙述 win10系统网络共享理光打印机的 ...
如果去掉数学前后的空格_理综+数学+地理+英语完型的方法和技巧
有的同学已经开学了,突然之间面对考试.面对老师的提问,有很多人都感觉自己大脑空白,什么都回答不上来,今天明德君就为大家整理思科的知识点和技巧,帮助大家快速恢复记忆,决胜开学的测试! 一.理综首先需要 ...
linux下gdb调试方法和技巧详解
linux下gdb调试方法和技巧整理简介 UNIX或者UNIX-like下调试工具启动gdb # 1. 在可执行程序不需要输入参数时,我们可以使用 gdb + 可执行程序 gdb ./typeid ...
skyline TerraBuilder 制作MPT方法与技巧（2）（转自）
本文转自:http://www.cnblogs.com/cannel/p/3622811.html 制作MPT的方法可以看这里<skyline TerraBuilder 制作MPT方法与技巧(1 ...
MATLAB作图方法与技巧(二)
作为MATLAB作图方法与技巧(一)的补充 1.绘制二维散点图 ① scatter函数 scatter(x,y,s,c)函数绘制向量x和y的散点图,其中s代表点的大小,c代表点的形状,s和c缺省时为默 ...

Handlebars的使用方法及技巧

Handlebars的使用方法及技巧相关推荐

最新文章

热门文章