Amazon Ads

2013年11月25日 星期一

【筆記】使用Handlebars JS函式庫實做項目列表

之前在Handlebars的初體驗中,有介紹Handlebars這個JavaScript的函式庫做樣版的替換,拜歐在後續的研讀中發現,用這個函式來做項目列表,好像也是不錯的選擇。

拜歐使用一個包含多個物件的陣列來做了一個範例,實際上運用應該是使用Ajax向伺服器端要求一串JSON字串,再來替換樣版成所需要的HTML字段。

首先一樣在<body>的最下方加入要引用的JS檔:



再來一樣加入一個樣板如:
這裡要注意的是,用了{{#each this}}{{/ecah}}把<li>包住。 最後開是JavaScript的程式碼:
(function(){
 //現在我們要替換的是一個陣列
 var bookArr = [
   {title : "First book", author : "Javakid"},
   {title : "Second book", author : "Javakid2"},
   {title : "Third book", author : "Javakid3"}
 ];
 var template = Handlebars.compile($('#booklist').html()); //取得id為booklist的script中的html字段
 $('ul.books').append(template(bookArr)); //把上面陣列的內容替換為樣板中的內容
})();
執行後結果如:


原始檔可以在這裡下載