handlebarsjs模板使用

创建时间:2017/9/23 17:51:56
关键字:handlebarsjs,模板

html代码:

<body>
   <div id="datas" class="content row">
       <!--重复多个-->
   </div>
 
   <div id="datas2" class="content row">
       <!--重复多个-->
   </div>
</body>
 

js代码:

<script type="text/javascript" src="./javascripts/base/jquery.min.js"></script>
<script type="text/javascript" src="./javascripts/base/handlebars.js"></script>
 
<script id="tpl" type="text/x-handlebars-template">
    {{#each persons}}
    <div  class="left col-6">
            <div>{{this}}</div>  <!--简单对象用this绑定-->
    </div>
    {{/each}}
</script>
 
 
<script id="tpl2" type="text/x-handlebars-template">
    {{#each persons}}
    <div  class="left col-6">
           <div>{{name}}</div>
          <div>{{gender}}</div>
           <div>{{age}}</div>
    </div>
    {{/each}}
</script>
 
<script >
 function initData() {
         var  data = {
                persons:[ "王铭","刘浩","艾力"];
          };
         var template = Handlebars.compile($("#tpl").html());
          $("#datas").html(template(data));
 
          var data2 = {
                    "persons": [
                        {
                            "name": "王铭",
                            "gender": "0",
                            "age": 30
                        },
                        {
                            "name": "刘浩",
                            "gender": "1",
                            "age": 22
                        },
                        {
                            "name": "艾力",
                            "gender": "0",
                            "age": 29
                        }
                    ]
                };
        
         template = Handlebars.compile($("#tpl2").html();
         $("#datas2").html(template(data2 ));
    }

</script>