Handlebars Paths Handlebars 路径处理 相当于html等静态资源引用的相对路径

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

        Emp emp = new Emp(1113, "老罗", 23, "2", 3000.00, new Date(), new Timestamp(System.currentTimeMillis()));
        emp.setJobs(new String[]{"销售副经理","开发工程师","测试工程师"});
        emps.add(emp);


        Manager m = new Manager(1001, "lucy", emps);

        return m;
    }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<table width="50%" border="1">
    <thead>
        <tr>
            <th>MID</th>
            <th>MNAME</th>
            <th>EMPS</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模板 -->
<!-- 
    <td>{{../mname}}</td>  相当于html页面的路径  可以退出一层找到父目录
    <td>{{this/name}}</td> 标识当前对象的name属性
    <td>{{this.name}}</td> 标识当前对象的name属性
    <td>{{./name}}</td> 标识当前对象的name属性
 -->
<script type="text/x-handlebars-template" id="demo_ht">
<tr>
    <td>{{this.mid}}</td>
    <td>{{this.mname}}</td>
    <td>
        <table width="100%" border="1">
            {{#each emps}}
            <tr>
                <td>{{./id}}</td>
                <td>{{this/name}}</td>
                <td>{{../mname}}</td>
                <td>
                    {{#if jobs}}
                    <table width="100%" border="1">
                        {{#each jobs}}
                        <tr>
                            <td>{{this}}</td>
                            <td>{{../../mid}} -- {{../../mname}}</td>
                            <td>{{../name}}</td>
                        </tr>
                        {{/each}}
                    </table>
                    {{/if}}
                </td>
            </tr>
            {{/each}}
        </table>
    </td>
</tr>
</script>

<script type="text/javascript">
    $(function(){
        $.ajax({
            type:"post",
            url:"test/testDemo08.do",
            dataType:"json",
            success:function(data){
                //编译模板
                var demo_ht = Handlebars.compile($("#demo_ht").html());

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

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值