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

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

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

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

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

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的基础知识就讲解完了,已经能满足日常网站的需求,当然handlebars还有其他的一些功能,可以参考中文手册:

http://keenwon.com/992.html

未完待续,然后文件的头和尾怎么能拆分出来放在单独的页面中来引用呢?不然不可能每个页面都写一遍,以后要改就麻烦了(当然如果你前端用的是php、asp之类的动态语言,那么一下部分可以忽略不看,因为我用的是html+ajax来调用api接口的)然后只能百度新的东西,最终找到了require text.js,又一神器出现,天将降大任于斯人也,那么简单再来说说,看招:

text.js是require.js下的一个插件,我代码里都有。

我把头和尾拆分为两个单独的html文件,如下:

header.html

<script id="header-template" type="text/x-handlebars-template">
<div class="header"><span>首页</span><span>联系我们</span><span>关于我们</span></div>
</script>

footer.html

<script id="footer-template" type="text/x-handlebars-template">
<div class='footer'>CopyRight© 2015-2016</div>
</script>

其实放在一个文件中也行,到时候自己体会。

两个文件拆分了,接下来就是引用的,那么require text.js就要出马了,先调用下。

<script type="text/javascript" src="js/require.js" data-main="js/main.js"></script>
data-main其实是定义了一个入口文件,这个就不细说了,参考官方文档:
http://www.bootcdn.cn/require-text/readme/
这个是英文的,大家可以自行百度其他文档。
main.js的代码是自己写的,写入口,其他的不多说了,就说和引用有关的,看代码:
define(["text!../header.html", "text!../footer.html"], function(header, footer) {
$('#header').html(header);
$('#header').html(Handlebars.compile($("#header-template").html()));
$('#footer').html(footer);
$('#footer').html(Handlebars.compile($("#footer-template").html()));
});

text!../header.html中的text!表示把header.html文件引用进来以文本的形式,反正就是类似于php的include、require,把header.html和footer.html引用到index.html中。

这样一来,Handlebars.compile渲染模版就要放在main.js的define回调中去。

这样就能在任何页面引用Handlebars模版文件了,说到这,大家应该会明白我刚说的头和尾能放一个文件中吧,调用模版也是根据模版的ID调用,如果模版不多,放一个公用html文件就好。

好了,废话就说到这了,放上大家心心念念的完整代码了!拜~

http://files.cnblogs.com/files/yuanxiaojian/handlebars_require.rar

今天过来更新下代码,关于requirejs的,模块化了js的管理和一些公用文件,改动较大,不明白可以参考官方文档,这里就不再介绍了,直接上代码了!2017-01-11

http://files.cnblogs.com/files/yuanxiaojian/handlebars_requirejs.rar

注意:要搭建本地环境后浏览,直接打开没内容,json之类的读取不到,这种最后用的时候肯定是服务器环境,小白不会搭建的话直接百度下载个phpstudy安装就好。

——若要转载请注明出处——

http://www.cnblogs.com/yuanxiaojian/p/6197781.html

												

[前端神器]handlebars+requirejs基本使用方法的更多相关文章

  1. [前端神器]handlebars+require基本使用方法

    最近在某网站看到了handlebars.js,出于好奇就百度了下这是神马玩意,结果让我很是欢喜,于是就开始自学下,handlebars就几个方法,蛮简单,言归正传! 以下是基本教学逻辑演示,会附完整代 ...

  2. 前端优化:RequireJS Optimizer 的使用和配置方法

    RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 C ...

  3. SpringMVC 前端获得定义JSON对象的方法

    SpringMVC 前端获得定义JSON对象的方法: 可以使用map进行对象的创建,这样就会解析成键值对,不需要为前端专门定义对象.

  4. WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 前言 GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不 ...

  5. 打造你的前端神器-webstorm11

    说起前端编辑器,用过dw,sublime,hbuilder,webstorm也不陌生,之前的版本8有用过一下,但是觉得比sublime重量太多,但是随着后来用node的开始,发现需要打造个web前端神 ...

  6. 前端神器avalonJS入门(一)

    转自:http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angula ...

  7. 前端神器avalonJS入门(二)

    本章开始搭配requireJS来使用avalon,开始之前,我们可以对avalon进行精简改造(注:新版的avalon已提供了shim版本,无需再做如下的精简了,直接点这里获取). avalon源码里 ...

  8. 前端神器-神级代码编辑软件Sublime Text下载、使用教程、插件推荐说明、全套快捷键

    Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能 ...

  9. 前端神器avalonJS入门(三)

    本章将介绍如何使用avalon来实现前端路由功能. 我们需要用到两个avalon路由配套模块—— mmHistory.js 和 mmRouter.js .其中mmHistory是用于历史管理,它会劫持 ...

随机推荐

  1. bundle adjustment原理(1)转载

    转自菠菜僵尸 http://www.cnblogs.com/shepherd2015/p/5848430.html bundle adjustment原理(1) 那些光束平差的工具,比如SBA.SSB ...

  2. Codeforces Round #336 (Div. 2)B 暴力 C dp D 区间dp

    B. Hamming Distance Sum time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  3. HDU--1874

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1874 分析:SPFA|Dijkastra. #include<iostream> #inc ...

  4. H5禁止手机虚拟键盘弹出

    点击输入框弹出自定义弹窗,输入框是input标:但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加readonly属性,另一个就 ...

  5. mongodb角色权限

    角色说明:Read:允许用户读取指定数据库readWrite:允许用户读写指定数据库dbAdmin:允许用户在指定数据库中执行管理函数,如索引创建.删除,查看统计或访问system.profileus ...

  6. 2017 国庆湖南Day2

    期望得分:100+30+100=230 实际得分:100+30+70=200 T3 数组开小了 ..... 记录 1的前缀和,0的后缀和 枚举第一个1的出现位置 #include<cstdio& ...

  7. 【CodeForces】960 F. Pathwalks 主席树+动态规划

    [题目]F. Pathwalks [题意]给定n个点m条边的有向图,可能不连通有重边有自环.每条边有编号 i 和边权 wi ,求最长的路径(可以经过重复节点)满足编号和边权都严格递增.n,m,wi&l ...

  8. 【LibreOJ】#6298. 「CodePlus 2018 3 月赛」华尔兹 BFS

    [题意]给定n*m的网格,起点和终点位置,一些格指定下一步的方向,一些格任意.要求为方向任意的格确定方向,使起点可以走到终点.n,m<=50. [算法]BFS [题解]这道题最好用BFS,因为D ...

  9. css各种姿势的水平居中

    首先是最常用的,利用margin属性的auto来进行水平居中 margin: 0 auto; 其中0是指上下的margin,auto是左右的margin,margin这个属性的简写是按顺时针走的,也就 ...

  10. 2017 ACM暑期多校联合训练 - Team 5 1008 HDU 6092 Rikka with Subset (找规律)

    题目链接 Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, s ...