详解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 相关文章推荐
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
Nest.js散列与加密实例详解
Feb 24 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版微信数据统计接口用法示例
2016/10/12 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
javascript中常用编程知识
2013/04/08 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python交互式图形编程实例(二)
2017/11/17 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python多进程使用函数封装实例
2020/05/02 Python
基于Python绘制个人足迹地图
2020/06/01 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
校庆标语集锦
2014/06/25 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python