Amazon Ads

2013年11月21日 星期四

【筆記】Handlebars的初體驗

昨天在看jQuery的線上教學時,講者有一段專門在講Handlebars,整個看下來,覺得是個不錯用的JS函式庫,若有機會直接使用JavaScript使用一些Open Data的JSON,就可以用這個函式庫來處理,先寫一些程式來試用看看。

首先到Handlebars官網下載該函式庫,下載後,再新建一個html文件,在html中先引入jQuery函式庫和剛下載的Handlebars函式庫:


再來在<body>中插入一個範本,如:

再來,要開始寫我們的程式碼了。

 var book = {
  title : "First book", //這裡的屬性要和上列的template中{{}}中的一樣
  author : "Javakid"
 };
 var content = $('#booklist').html();//取得上列的template內容
 console.log(content); //可以先把content印出來,確認jQuery是有作用的
到這一步,用Chrome開啟html文件,應該在console中可以看到下列內容:


開始使用Handlebars的API:
var template = Handlebars.compile(content);
var html = template(book);

 $(document.body).append(html);  //直接把html片段加到body中
完整的JavaScript程式碼如下:
(function(){
 var book = {
  title : "First book", //這裡的屬性要和上列的template中{{}}中的一樣
  author : "Javakid"
 };
 var content = $('#booklist').html(); //取得上列的template內容
 //console.log(content);

 var template = Handlebars.compile(content);
 var theBook = template(book);

 var html = template(book);

  $(document.body).append(html); //直接把html片段加到body中
})()
開啟網頁後,應該會看到下列的結果:

範例原始碼下載

若在要替換的值中加入html標籤的話,會有什麼樣的結果呢?如把上列的book物件改成:

var book = {
 title : "First book",
 author : "Javakid" //加了strong
};

結果是把<strong>整個顯示出來,而不是強調中間包裹的字串:


這時就要將上方中樣板的script修改一下:



上列的樣板中,titleauthor旁都多加了一個大括號,變成有三個大括號包覆著,再用瀏覽器開啟html,就能如預期地顯示加強效果:


您也許也有興趣看看【筆記】使用Handlebars JS函式庫實做項目列表