詳解handlebars+require基本使用方法，handlebarsrequire

詳解handlebars+require基本使用方法，handlebarsrequire

最近在某網站看到了handlebars.js，出於好奇就百度了下這是神馬玩意，結果讓我很是歡喜，於是就開始自學下，handlebars就幾個方法，蠻簡單，言歸正傳！

以下是基本教學邏輯示範，會附完整代碼

測試案例就分為3大塊，頭、主體、尾：

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

先來講講id="contact"主體有些什麼內容，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通訊錄"; } });

註冊一個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" }] };

最後如下，其實和剛剛那個主體一樣，就是有頭有尾而已：

到這裡其實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://wd.jb51.net:81//201612/yuanma/handlebars_require_jb51.rar

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，同時也希望多多支援幫客之家！