详解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 相关文章推荐
JSONP 跨域共享信息
Aug 16 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 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 变量的定义方法
2010/01/26 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python实现备份文件实例
2014/09/16 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
python如何实现单链表的反转
2020/02/10 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Python 可视化神器Plotly详解
2020/12/26 Python
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
杠杆的科学教学反思
2014/01/10 职场文书
公司企业表扬信
2014/01/11 职场文书
优秀党员主要事迹
2014/01/19 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
公司回复函格式
2015/07/14 职场文书