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

最新推荐文章于 2020-12-11 09:43:18 发布

cheyunmei

最新推荐文章于 2020-12-11 09:43:18 发布

阅读量688

点赞数

分类专栏： Handlebars 文章标签： html handlebars springmvc 路径使用

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

版权

Handlebars 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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