資訊專欄INFORMATION COLUMN
摘要：其實(shí)是定義了一個入口文件，這個就不細(xì)說了，參考官方文檔這個是英文的，大家可以自行百度其他文檔。
最近在某網(wǎng)站看到了handlebars.js，出于好奇就百度了下這是神馬玩意，結(jié)果讓我很是歡喜，于是就開始自學(xué)下，handlebars就幾個方法，蠻簡單，言歸正傳！
以下是基本教學(xué)邏輯演示，會附完整代碼
測試案例就分為3大塊，頭、主體、尾：
先來講講id="contact"主體有些什么內(nèi)容，html代碼就不貼了，直接看下圖：
handlebars的模版代碼如下：
圖片中的‘2016通訊錄’用到了handlebars.registerHelper，代碼如下：
Handlebars.registerHelper("transformat", function(value) {
if(value == "通訊錄") {
return new Handlebars.SafeString("2016通訊錄")
} else {
return "old通訊錄";
}
});
注冊一個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));
如果有通用模版，就是一個模版要調(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í)和剛剛那個主體一樣，就是有頭有尾而已：
到這里其實(shí)handlebars的基礎(chǔ)知識就講解完了，已經(jīng)能滿足日常網(wǎng)站的需求，當(dāng)然handlebars還有其他的一些功能，可以參考中文手冊：
http://keenwon.com/992.html
未完待續(xù)，然后文件的頭和尾怎么能拆分出來放在多帶帶的頁面中來引用呢？不然不可能每個頁面都寫一遍，以后要改就麻煩了（當(dāng)然如果你前端用的是php、asp之類的動態(tài)語言，那么一下部分可以忽略不看，因?yàn)槲矣玫氖莌tml+ajax來調(diào)用api接口的）然后只能百度新的東西，最終找到了require text.js，又一神器出現(xiàn)，天將降大任于斯人也，那么簡單再來說說，看招：
text.js是require.js下的一個插件，我代碼里都有。
我把頭和尾拆分為兩個多帶帶的html文件，如下：
header.html
footer.html
其實(shí)放在一個文件中也行，到時候自己體會。
兩個文件拆分了，接下來就是引用的，那么require text.js就要出馬了，先調(diào)用下。
data-main其實(shí)是定義了一個入口文件，這個就不細(xì)說了，參考官方文檔：
http://www.bootcdn.cn/require-text/readme/
這個是英文的，大家可以自行百度其他文檔。
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)該會明白我剛說的頭和尾能放一個文件中吧，調(diào)用模版也是根據(jù)模版的ID調(diào)用，如果模版不多，放一個公用html文件就好。
好了，廢話就說到這了，放上大家心心念念的完整代碼了！拜~
http://files.cnblogs.com/files/yuanxiaojian/handlebars_require.rar
今天過來更新下代碼，關(guān)于requirejs的，模塊化了js的管理和一些公用文件，改動較大，不明白可以參考官方文檔，這里就不再介紹了，直接上代碼了！2017-01-11
http://files.cnblogs.com/files/yuanxiaojian/handlebars_requirejs.rar
注意：要搭建本地環(huán)境后瀏覽，直接打開沒內(nèi)容，json之類的讀取不到，這種最后用的時候肯定是服務(wù)器環(huán)境，小白不會搭建的話直接百度下載個phpstudy安裝就好。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/81227.html
摘要：維護(hù)起來將是我們開發(fā)的噩夢。的都是這種的閉合結(jié)構(gòu)的判斷只能判斷和，沒辦法進(jìn)行這種的邏輯判斷。它的設(shè)定就是如此，它認(rèn)為邏輯判斷的內(nèi)容不應(yīng)該出現(xiàn)在模板中。因?yàn)榈妮敵瞿J(rèn)轉(zhuǎn)義，幾乎所有的模板引擎輸出默認(rèn)都是轉(zhuǎn)義的，避免攻擊。 概述 剛接觸前端的時候，師傅就給我推薦了Handlebars，自己也蠻喜歡它的語法。到現(xiàn)在，Handlebars都已經(jīng)更新到3.0.3了，是時候重新過一遍文檔了。 ...
摘要：一句化即它是插件的插件，作者事后才發(fā)現(xiàn)有這么一個插件繞了不少彎路。這里的主要是為了保存這段內(nèi)容用于打包使用。免費(fèi)領(lǐng)取驗(yàn)證碼內(nèi)容安全短信發(fā)送直播點(diǎn)播體驗(yàn)包及云服務(wù)器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營經(jīng)驗(yàn)分享請訪問網(wǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū) 本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。 前言我這里就不介紹requirejs了， 簡而言之： requirejs是支持AMD規(guī)范的模塊加載器， 事實(shí)上它也是...
摘要：簡單來說，模板最本質(zhì)的作用是變靜為動，一切利于這方面的都是優(yōu)勢，不利于的都是劣勢。二選擇的原因全球最受歡迎的模板引擎是全球使用率最高的模板引擎，所以當(dāng)之無愧是全球最受歡迎的模板引擎。創(chuàng)建更為復(fù)雜一些，當(dāng)時功能更加強(qiáng)大。 showImg(https://segmentfault.com/img/bVbb3kg?w=775&h=216); 為什么需要使用模板引擎？ 關(guān)于為什么要使用模板引擎...
閱讀 3773·2021-11-11 10:58
閱讀 2566·2021-09-22 15:43
閱讀 2921·2019-08-30 15:44
閱讀 2296·2019-08-30 13:08
閱讀 1892·2019-08-29 17:28
閱讀 958·2019-08-29 10:54
閱讀 734·2019-08-26 11:46
閱讀 3559·2019-08-26 11:43
