利用handlebars做一个简单的列表循环

/*首先要先引入jquery.js以及handlebars-v4.0.10.js*/

<h1>关于循环中索引的使用</h1>

    <table>

        <thead>

            <tr>

                <th>序号</th>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

            </tr>

        </thead>

        <tbody id="tableList">

        </tbody>

    </table>

    <script id="table-template" type="text/x-handlebars-template">

        {{#each student}}

        <tr>

            <td>{{addOne @index}} </td>

            <td>{{name}}</td>

            <td>{{sex}}</td>

            <td>{{age}}</td>

        </tr>

        {{/each}}

    </script>

    <script type="text/javascript" >

        $(document).ready(function(){

            //模拟json对象

            var data={

                "student":[

                {

                    "name":"张三",

                    "sex":"0",

                    "age":"18"

                },

                {

                    "name":"李四",

                    "sex":"0",

                    "age":"22"

                },

                {

                    "name":"李四",

                    "sex":"1",

                    "age":"19"

                }

            ]

            };

        

        //注册一个Handlebars模板，通过id找到某一个模板，获取模板的html框架

        var myTemplate = Handlebars.compile($("#table-template").html());

        //注册一个Handlebars Helper，用来将索引+1,因为默认是从0 开始的

        Handlebars.registerHelper("addOne",function(index,options){

            return parseInt(index) +1 ;

        });

        //将json对象用刚刚注册的Handlebars模板封装，得到最终的html，插入到基础的table中。

        $('#tableList').html(myTemplate(data));

        })

 

    </script>