详解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 - css() 方法示例详解
Jan 16 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
js实现分页功能
May 24 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
10 个经典PHP函数
2013/10/17 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php+mysql数据库查询实例
2015/01/21 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
wxPython事件驱动实例详解
2014/09/28 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
详解Python中的type和object
2018/08/15 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python实现按首字母分类查找功能
2019/10/31 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
策划创业计划书
2014/02/06 职场文书
期末评语大全
2014/05/04 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
医学生自荐信范文
2015/03/05 职场文书
公司出纳岗位职责
2015/03/31 职场文书
老员工辞职信范文
2015/05/12 职场文书
Windows7下FTP搭建图文教程
2022/08/05 Servers