欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解handlebars+require基本使用方法

 更新時(shí)間:2016年12月21日 15:22:42   作者:袁小濺  
本文主要對handlebars+require基本使用方法進(jìn)行詳細(xì)介紹,文章尾部會附上完整代碼供大家參考。需要的朋友一起來看下吧

最近在某網(wǎng)站看到了handlebars.js,出于好奇就百度了下這是神馬玩意,結(jié)果讓我很是歡喜,于是就開始自學(xué)下,handlebars就幾個(gè)方法,蠻簡單,言歸正傳!

以下是基本教學(xué)邏輯演示,會附完整代碼

測試案例就分為3大塊,頭、主體、尾:

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

先來講講id="contact"主體有些什么內(nèi)容,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通訊錄";
 }
 });

注冊一個(gè)helper,value是模版?zhèn)鬟M(jìn)來的值,相當(dāng)于jq的function(),new Handlebars.SafeString是為了防止把html標(biāo)簽輸出為文本形式,就是jq下html()和text()的區(qū)別。

最后通過渲染將模版輸出到網(wǎng)頁,代碼如下:

$('#contact').html(Handlebars.compile($("#contact-template").html())(data));

如果有通用模版,就是一個(gè)模版要調(diào)用多次,上面的代碼也可以這樣寫,方便調(diào)用:

var contact=Handlebars.compile($("#contact-template").html());
$('#contact').html(contact(data));

其中的data就是json數(shù)據(jù),為了方便就自定義了:

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

最后效果圖如下,其實(shí)和剛剛那個(gè)主體一樣,就是有頭有尾而已:

到這里其實(shí)handlebars的基礎(chǔ)知識就講解完了,已經(jīng)能滿足日常網(wǎng)站的需求,當(dāng)然handlebars還有其他的一些功能,可以參考中文手冊:

http://keenwon.com/992.html

未完待續(xù),然后文件的頭和尾怎么能拆分出來放在單獨(dú)的頁面中來引用呢?不然不可能每個(gè)頁面都寫一遍,以后要改就麻煩了(當(dāng)然如果你前端用的是php、asp之類的動態(tài)語言,那么一下部分可以忽略不看,因?yàn)槲矣玫氖莌tml+ajax來調(diào)用api接口的)然后只能百度新的東西,最終找到了require text.js,又一神器出現(xiàn),天將降大任于斯人也,那么簡單再來說說,看招:

text.js是require.js下的一個(gè)插件,我代碼里都有。

我把頭和尾拆分為兩個(gè)單獨(dú)的html文件,如下:

header.html

<script id="header-template" type="text/x-handlebars-template">
 <div class="header"><span>首頁</span><span>聯(lián)系我們</span><span>關(guān)于我們</span></div>
</script>

footer.html

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

其實(shí)放在一個(gè)文件中也行,到時(shí)候自己體會。

兩個(gè)文件拆分了,接下來就是引用的,那么require text.js就要出馬了,先調(diào)用下。

<script type="text/javascript" src="js/require.js" data-main="js/main.js"></script>

data-main其實(shí)是定義了一個(gè)入口文件,這個(gè)就不細(xì)說了,參考官方文檔:

http://www.bootcdn.cn/require-text/readme/

這個(gè)是英文的,大家可以自行百度其他文檔。

main.js的代碼是自己寫的,寫入口,其他的不多說了,就說和引用有關(guān)的,看代碼:

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文件引用進(jìn)來以文本的形式,反正就是類似于php的include、require,把header.html和footer.html引用到index.html中。

這樣一來,Handlebars.compile渲染模版就要放在main.js的define回調(diào)中去。

這樣就能在任何頁面引用Handlebars模版文件了,說到這,大家應(yīng)該會明白我剛說的頭和尾能放一個(gè)文件中吧,調(diào)用模版也是根據(jù)模版的ID調(diào)用,如果模版不多,放一個(gè)公用html文件就好。

好了,廢話就說到這了,放上大家心心念念的完整代碼了!拜~

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

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!

相關(guān)文章

最新評論