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