handlebars模板替换

<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>

 

posted on 2016-11-26 15:35  爱吃柠檬不加糖  阅读(409)  评论(0编辑  收藏  举报

导航