[前端神器]handlebars+requirejs基本使用方法
2016-12-19 15:51
393 查看
最近在某网站看到了handlebars.js,出于好奇就百度了下这是神马玩意,结果让我很是欢喜,于是就开始自学下,handlebars就几个方法,蛮简单,言归正传!
以下是基本教学逻辑演示,会附完整代码
测试案例就分为3大块,头、主体、尾:
先来讲讲id="contact"主体有些什么内容,html代码就不贴了,直接看下图:
![](https://images2015.cnblogs.com/blog/1078060/201612/1078060-20161219150753353-1535741532.png)
handlebars的模版代码如下:
图片中的‘2016通讯录’用到了handlebars.registerHelper,代码如下:
注册一个helper,value是模版传进来的值,相当于jq的function(),new Handlebars.SafeString是为了防止把html标签输出为文本形式,就是jq下html()和text()的区别。
最后通过渲染将模版输出到网页,代码如下:
如果有通用模版,就是一个模版要调用多次,上面的代码也可以这样写,方便调用:
其中的data就是json数据,为了方便就自定义了:
最后效果图如下,其实和刚刚那个主体一样,就是有头有尾而已:
![](https://images2015.cnblogs.com/blog/1078060/201612/1078060-20161219152059260-898768762.png)
到这里其实handlebars的基础知识就讲解完了,已经能满足日常网站的需求,当然handlebars还有其他的一些功能,可以参考中文手册:
http://keenwon.com/992.html
未完待续,然后文件的头和尾怎么能拆分出来放在单独的页面中来引用呢?不然不可能每个页面都写一遍,以后要改就麻烦了(当然如果你前端用的是php、asp之类的动态语言,那么一下部分可以忽略不看,因为我用的是html+ajax来调用api接口的)然后只能百度新的东西,最终找到了require text.js,又一神器出现,天将降大任于斯人也,那么简单再来说说,看招:
text.js是require.js下的一个插件,我代码里都有。
我把头和尾拆分为两个单独的html文件,如下:
header.html
footer.html
其实放在一个文件中也行,到时候自己体会。
两个文件拆分了,接下来就是引用的,那么require text.js就要出马了,先调用下。
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
以下是基本教学逻辑演示,会附完整代码
测试案例就分为3大块,头、主体、尾:
<div id="header"></div> <div class="contact" id="contact"></div> <div id="footer"></div>
先来讲讲id="contact"主体有些什么内容,html代码就不贴了,直接看下图:
![](https://images2015.cnblogs.com/blog/1078060/201612/1078060-20161219150753353-1535741532.png)
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" }] };
最后效果图如下,其实和刚刚那个主体一样,就是有头有尾而已:
![](https://images2015.cnblogs.com/blog/1078060/201612/1078060-20161219152059260-898768762.png)
到这里其实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基本使用方法
- Emmet基本使用方法前端神器
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
- 详解handlebars+require基本使用方法
- 前端自动化神器LiveReload配合浏览器和less/sass使用方法
- 前端自动化构建工具---gulp的安装与基本使用方法
- Handlebars的使用方法文档整理(Handlebars.js)
- 前端Cookie基本使用方法
- Vi编辑器的基本使用方法
- 基本技术:使用委派对方法进行异步调用/异步消费Web Services
- Log4j基本使用方法
- Vi编辑器的基本使用方法
- Vi编辑器的基本使用方法
- Vi 的基本使用方法
- Log4j基本使用方法
- Log4j基本使用方法
- Log4j基本使用方法
- [导入]Vi编辑器的基本使用方法 (转载)
- Vi编辑器的基本使用方法
- Log4j基本使用方法