详解handlebars+require基本使用方法


Posted in Javascript onDecember 21, 2016

最近在某网站看到了handlebars.js,出于好奇就百度了下这是神马玩意,结果让我很是欢喜,于是就开始自学下,handlebars就几个方法,蛮简单,言归正传!

以下是基本教学逻辑演示,会附完整代码

测试案例就分为3大块,头、主体、尾:

<div id="header"></div>
<div class="contact" id="contact"></div>
<div id="footer"></div>

先来讲讲id="contact"主体有些什么内容,html代码就不贴了,直接看下图:

详解handlebars+require基本使用方法

handlebars的模版代码如下:

<script id="contact-template" type="text/x-handlebars-template">
 <div class="tit">{{transformat info}}</div>
 {{#tit}}
 <span class="one">{{this}}</span> {{/tit}} {{#student}}
 <span class="one">{{@index}}</span><span class="one">{{name}}</span><span class="one">{{sex}}</span><span class="one">{{age}}</span><span class="one">{{sheight}}</span> {{/student}}
 </script>

图片中的‘2016通讯录'用到了handlebars.registerHelper,代码如下:

Handlebars.registerHelper("transformat", function(value) {
 if(value == "通讯录") {
 return new Handlebars.SafeString("<font color='pink'>2016通讯录</font>")
 } else {
 return "old通讯录";
 }
 });

注册一个helper,value是模版传进来的值,相当于jq的function(),new Handlebars.SafeString是为了防止把html标签输出为文本形式,就是jq下html()和text()的区别。

最后通过渲染将模版输出到网页,代码如下:

$('#contact').html(Handlebars.compile($("#contact-template").html())(data));

如果有通用模版,就是一个模版要调用多次,上面的代码也可以这样写,方便调用:

var contact=Handlebars.compile($("#contact-template").html());
$('#contact').html(contact(data));

其中的data就是json数据,为了方便就自定义了:

var data = {
 "info": "通讯录",
 "tit": ["序号", "姓名", "性别", "年龄", "身高"],
 "student": [{
 "name": "张三",
 "sex": "男",
 "age": 18,
 "sheight": "175"
 }, {
 "name": "李四",
 "sex": "男",
 "age": 22,
 "sheight": "180"
 }, {
 "name": "妞妞",
 "sex": "女",
 "age": 18,
 "sheight": "165"
 }, {
 "name": "袁帅",
 "sex": "男",
 "age": 17,
 "sheight": "173"
 }]
 };

最后效果图如下,其实和刚刚那个主体一样,就是有头有尾而已:

详解handlebars+require基本使用方法

到这里其实handlebars的基础知识就讲解完了,已经能满足日常网站的需求,当然handlebars还有其他的一些功能,可以参考中文手册:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
使用js画图之画切线
Jan 12 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 #Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 #Javascript
js querySelector() 使用方法
Dec 21 #Javascript
简单实现Vue的observer和watcher
Dec 21 #Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 #Javascript
js实现开启密码大写提示
Dec 21 #Javascript
js实现的在线调色板功能完整实例
Dec 21 #Javascript
You might like
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
动态样式类封装JS代码
2009/09/02 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
css配合jquery美化 select
2013/11/29 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
5种Python单例模式的实现方式
2016/01/14 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
python实现剪切功能
2019/01/23 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
年终考核评语
2014/01/19 职场文书
超市采购员岗位职责
2014/02/01 职场文书
护理不良事件检讨书
2014/02/06 职场文书
中学生思想品德评语
2014/12/31 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
股东协议书范本2016
2016/03/21 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技