<html> <head> <meta charset="UTF-8" /> <!-- <script type="text/javascript" src="./jquery-2.1.1.min.js"></script> --> <link rel="stylesheet" href="./bootstrap.min.css" /> <script type="text/javascript" src="./jquery-1.11.3.min.js"></script> <script type="text/javascript" src="./handlebars-v4.0.4.js"></script> <script id="entry-template" type="text/x-handlebars-template"> {{#items}} <tr id="entry"> <td><a href="/product_manage/products/{{id}}">{{name}}</a> {{#children}} <span>{{this}}</span> {{/children}} </td> <td>{{createAt}}</td> <td>{{price.price}}</td> <td>{{price.currency}}</td> </tr> {{/items}} </script> <script type="text/javascript"> function log_msg(msg) { if ("object" == typeof(console) && "function" == typeof(console.log)) { console.log(msg) ; } else { //alert(msg) ; } } var content={ "page":1, "pageLimit":10, "totalCount":2, "items": [ { "name":"iron man", "uri":"https://wwww.xxx.com/products/1", "createAt":"2015-05-03", "price": { "price": 200, "currency":"CNY", "createAt":"2015-05-01" }, "children":[40,"a1"] }, { "name":"transformer", "uri":"https://wwww.xxx.com/products/2", "createAt":"2015-05-02", "price": { "price": 200, "currency":"CNY", "createAt":"2015-05-02" }, "children":[42,"a2"] } ], "totalPage":1 } $(document).ready(function(){ //console.log("8889") ; var source = $("#entry-template").html(); var template = Handlebars.compile(source); var sHtml = template(content); //console.log(sHtml) ; $("#d01").html(sHtml) ; log_msg(sHtml) ; }) ; </script> </head> <body> <div class="container content"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>产品名称</th> <th>创建日期</th> <th>价格</th> <th>币种</th> </tr> </thead> <tbody id="d01"> </tbody> </table> </div> </body> </html>