handlebars获取json数据（集合中的元素存在属性是一个集合或者数组）each嵌套也可使用with语法

最新推荐文章于 2019-03-16 16:51:15 发布

cheyunmei

最新推荐文章于 2019-03-16 16:51:15 发布

阅读量1.5k

点赞数

分类专栏： Handlebars 文章标签： timestamp arraylist each 数据 json

本文链接：https://blog.csdn.net/cheyunmei/article/details/78127481

版权

Handlebars 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

    @RequestMapping("testDemo04.do")
    public List<Emp> testDemo04(){
        List<Emp> emps = new ArrayList<Emp>();
        Emp emp1 = new Emp(1111, "老龚", 33, "1", 1000.00, new Date(), new Timestamp(System.currentTimeMillis()));
        Emp emp2 = new Emp(1111, "老李", 30, "0", 1600.00, new Date(), new Timestamp(System.currentTimeMillis()));

        emp1.setJobs(new String[]{"销售副经理","开发工程师","测试工程师"});
        emp2.setJobs(new String[]{"开发工程师","测试工程师"});

        emps.add(emp1);
        emps.add(emp2);

        return emps;
    }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table width="50%" border="1">
    <thead>
        <tr>
            <th>NO.</th>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
            <th>GENDER</th>
            <th>SALARY</th>
            <th>BIRTHDAY</th>
            <th>HIREDATE</th>
            <th>JOBS</th>
        </tr>
    </thead>
    <tbody id="demo">

    </tbody>
</table>



<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/handlebars-4.0.10.min.js"></script>

<!-- 定义handlebars模板 -->
<script type="text/x-handlebars-template" id="demo_ht">
    {{#each this}}
        <tr>
            <td>{{myCount @index}}</td>
            <td>{{id}}</td>
            <td>{{name}}</td>
            <td>{{gender}}</td>
            <td>{{age}}</td>
            <td>{{salary}}</td>
            <td>{{birthday}}</td>
            <td>{{hiredate}}</td>
            <td>
                {{#each jobs}}
                    {{this}}
                {{/each}}
            </td>
        </tr>
    {{/each}}
</script>
    <!-- 使用with也可以
        {{#with jobs}}
            {{#each this}}
                {{this}}
            {{/each}}
        {{/with}}
     -->
<script type="text/javascript">
    $(function(){
        $.ajax({
            type:"post",
            url:"test/testDemo04.do",
            dataType:"json",
            success:function(data){
                //编译模板
                var demo_ht = Handlebars.compile($("#demo_ht").html());

                //定义一个helper 实现在index基础上从1开始
                Handlebars.registerHelper("myCount" , function(index){
                    return index + 1 ;
                });

                //模板渲染数据
                var _html = demo_ht(data);
                //dom操作
                $("#demo").html(_html);
            },
            error:function(){
                alert("请求发生异常!");
            }
        });
    });
</script>
</body>
</html>