拜歐使用一個包含多個物件的陣列來做了一個範例,實際上運用應該是使用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)); //把上面陣列的內容替換為樣板中的內容
})();
執行後結果如:
原始檔可以在這裡下載。
