handlebars.js模版引擎中EACH循环遍历的使用

最新推荐文章于 2022-09-29 17:18:55 发布

水痕01

最新推荐文章于 2022-09-29 17:18:55 发布

阅读量4.9k

点赞数 2

分类专栏： css html css3 html5

本文链接：https://blog.csdn.net/kuangshp128/article/details/69258369

版权

css 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

html

16 篇文章 0 订阅

订阅专栏

css3

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <title>handlebars</title>
</head>
<body>
<h1>each-基本循环使用方法</h1>
<table style="border-collapse: collapse;" width="100%" border="1">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="tableList">

    </tbody>
</table>
</body>
<script id="entry-template" type="text/x-handlebars-template">
    {{#each student}}
    <tr>
        <td>{{name}}</td>
        <td>{{sex}}</td>
        <td>{{age}}</td>
    </tr>
    {{/each}}
</script>
<script type="text/javascript">
    var source = $("#entry-template").html();
    var template = Handlebars.compile(source);
    var context = {
        "student": [
            {
                "name": "张三",
                "sex": "0",
                "age": 18
            },
            {
                "name": "李四",
                "sex": "0",
                "age": 22
            }
        ]

    };
    var html = template(context);
    $("#tableList").html(html);
</script>
</html>

水痕01

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
handlebars.js模版引擎中EACH循环遍历的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/handlebars.js/4.0.
复制链接

扫一扫