详解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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
json原理分析及实例介绍
Nov 29 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
js获取图片宽高的方法
Nov 25 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
vue组件系列之TagsInput详解
May 14 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命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
解决FLASH需要点击激活的代码
2006/12/20 Javascript
utf8的编码算法 转载
2006/12/27 Javascript
lib.utf.js
2007/08/21 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python 变量类型详解
2018/10/10 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
pandas数据集的端到端处理
2019/02/18 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Python实现疫情地图可视化
2021/02/05 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
.NET方向面试题
2014/11/20 面试题
销售团队获奖感言
2014/08/14 职场文书
乱世佳人观后感
2015/06/08 职场文书
2015初中团委工作总结
2015/07/28 职场文书
导游词之日月潭
2019/11/05 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android