详解handlebars+require基本使用方法

网友投稿 263 2023-06-23


详解handlebars+require基本使用方法

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

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

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

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

handlebars的模版代码如下:

图片中的‘2016通讯录'用到了handlebars.registerHelper,代码如下:

Handlebars.registerHelper("transformat", function(value) {

if(value == "通讯录") {

return new Handlebars.SafeString("2016通讯录")

} 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"

}]

};

最后效果图如下,其实和刚刚那个主体一样,就是有头有尾而已:

到这里其实handLWDZAClebars的基础知识就讲解完了,已经能满足日常网站的需求,当然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就要出马了,先调用下。

data-main其实是定义了一个入口文件,这个就不细说了,参考官方文档:

http://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(HaLWDZACndlebars.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://

了!拜~

完整代码下载地址:http://xiazai.jb51.net/201612/yuanma/handlebars_require_jb51.rar


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java 解决异常 2 字节的 UTF
下一篇:简单实现Vue的observer和watcher
相关文章

 发表评论

暂时没有评论,来抢沙发吧~