詳解handlebars+require基本使用方法
最近在某網(wǎng)站看到了handlebars.js,出于好奇就百度了下這是神馬玩意,結(jié)果讓我很是歡喜,于是就開(kāi)始自學(xué)下,handlebars就幾個(gè)方法,蠻簡(jiǎn)單,言歸正傳!
以下是基本教學(xué)邏輯演示,會(huì)附完整代碼
測(cè)試案例就分為3大塊,頭、主體、尾:
<div id="header"></div> <div class="contact" id="contact"></div> <div id="footer"></div>
先來(lái)講講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通訊錄"; } });
注冊(cè)一個(gè)helper,value是模版?zhèn)鬟M(jìn)來(lái)的值,相當(dāng)于jq的function(),new Handlebars.SafeString是為了防止把html標(biāo)簽輸出為文本形式,就是jq下html()和text()的區(qū)別。
最后通過(guò)渲染將模版輸出到網(wǎng)頁(yè),代碼如下:
$('#contact').html(Handlebars.compile($("#contact-template").html())(data));
如果有通用模版,就是一個(gè)模版要調(diào)用多次,上面的代碼也可以這樣寫(xiě),方便調(diào)用:
var contact=Handlebars.compile($("#contact-template").html()); $('#contact').html(contact(data));
其中的data就是json數(shù)據(jù),為了方便就自定義了:
var data = { "info": "通訊錄", "tit": ["序號(hào)", "姓名", "性別", "年齡", "身高"], "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ǔ)知識(shí)就講解完了,已經(jīng)能滿足日常網(wǎng)站的需求,當(dāng)然handlebars還有其他的一些功能,可以參考中文手冊(cè):
未完待續(xù),然后文件的頭和尾怎么能拆分出來(lái)放在單獨(dú)的頁(yè)面中來(lái)引用呢?不然不可能每個(gè)頁(yè)面都寫(xiě)一遍,以后要改就麻煩了(當(dāng)然如果你前端用的是php、asp之類的動(dòng)態(tài)語(yǔ)言,那么一下部分可以忽略不看,因?yàn)槲矣玫氖莌tml+ajax來(lái)調(diào)用api接口的)然后只能百度新的東西,最終找到了require text.js,又一神器出現(xiàn),天將降大任于斯人也,那么簡(jiǎn)單再來(lái)說(shuō)說(shuō),看招:
text.js是require.js下的一個(gè)插件,我代碼里都有。
我把頭和尾拆分為兩個(gè)單獨(dú)的html文件,如下:
header.html
<script id="header-template" type="text/x-handlebars-template"> <div class="header"><span>首頁(yè)</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í)候自己體會(huì)。
兩個(gè)文件拆分了,接下來(lái)就是引用的,那么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ì)說(shuō)了,參考官方文檔:
http://www.bootcdn.cn/require-text/readme/
這個(gè)是英文的,大家可以自行百度其他文檔。
main.js的代碼是自己寫(xiě)的,寫(xiě)入口,其他的不多說(shuō)了,就說(shuō)和引用有關(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)來(lái)以文本的形式,反正就是類似于php的include、require,把header.html和footer.html引用到index.html中。
這樣一來(lái),Handlebars.compile渲染模版就要放在main.js的define回調(diào)中去。
這樣就能在任何頁(yè)面引用Handlebars模版文件了,說(shuō)到這,大家應(yīng)該會(huì)明白我剛說(shuō)的頭和尾能放一個(gè)文件中吧,調(diào)用模版也是根據(jù)模版的ID調(diào)用,如果模版不多,放一個(gè)公用html文件就好。
好了,廢話就說(shuō)到這了,放上大家心心念念的完整代碼了!拜~
完整代碼下載地址:http://xiazai.jb51.net/201612/yuanma/handlebars_require_jb51.rar
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
基于jQuery實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無(wú)視頁(yè)面關(guān)閉)
最近做了一個(gè)項(xiàng)目,其中有需求要求實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后倒計(jì)時(shí)功能,其中有個(gè)難點(diǎn):要求關(guān)閉頁(yè)面也進(jìn)行倒計(jì)時(shí)。好吧,下面小編把jquery 發(fā)送驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)代碼分享給大家,大家可以參考下2016-09-09基于jquery用于查詢操作的實(shí)現(xiàn)代碼
通過(guò)javascript得到用戶操作改變url參數(shù)從而實(shí)現(xiàn)某些功能,如查詢(具體的查詢由服務(wù)器端代碼得到url中的參數(shù)組成查詢語(yǔ)句實(shí)現(xiàn))。2010-05-05jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果,效果非常美觀大方,通過(guò)鼠標(biāo)hover事件及頁(yè)面元素的遍歷與樣式操作實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08jQuery 全選 全部選 反選 實(shí)現(xiàn)代碼
上次做了一個(gè)前端項(xiàng)目,其中有功能要求實(shí)現(xiàn)jquery 全選和反選功能,下面小編抽個(gè)時(shí)間把實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考下2016-08-08jQuery使用zTree插件實(shí)現(xiàn)可拖拽的樹(shù)示例
本篇文章主要介紹了js使用zTree插件實(shí)現(xiàn)可拖拽的樹(shù)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09