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修改一下：

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


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