2.handlebars（each使用）

作者: 唐人不自醉 | 来源:发表于2018-09-18 15:05 被阅读0次

2.handlebars（each使用）
2.handlebars（each使用）
jQuery源码二周目#5 迭代器
handlebars
Perl的each操作符
jQuery 常用方法小结
遍历方法比较 forEach,each(),every()
Array.every方法介绍
获取表单内容
提示58-59

在handlebars（基础一）中简单的渲染了页面，但是在真实的开发中后台给我们的数据往往是嵌套关系的，我们不止渲染一项数据，有一个列表甚至是几个列表怎么渲染呢？今天就要说说handlebars中的循环{{#each data}}
一：引入1.引入jquery 2.引入handlebars

<script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="./js/handlebars-v4.0.10.js"></script>

二：写handlebars模板

注意：在需要渲染的html外层包上script标签，1.type要写，且要写对。2.给这个模板添加一个唯一的id值，不添加会找不到。注意咯！{{#each student }}这里是循环的代码噢！意思就是说循环student 这个变量中的数据呢~，不明白不要紧待会我们一起看数据结构。

<tbody class="student-temp">
    <script type="text/x-handlebars-template" id="student-temp">
        {{#each student}}   
        <tr>
            <td>aa</td>
            <td>bb</td>
            <td>cc</td>
            <td>dd</td>
        </tr>
        {{/each}}
    </script>
    </tbody>

三：handlebars的取值 {{变量名}}

<tbody class="student-temp">
    <script type="text/x-handlebars-template" id="student-temp">
        {{#each student}}
        <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
            <td>{{gender}}</td>
            <td>{{fraction}}</td>
        </tr>
        {{/each}}
    </script>
    </tbody>

四：渲染数据
在这里注意看数据结构噢~

<script>
    //    模拟数据
    var data = {
        "student": [
        {
            "name": "柳2",
            "age": '8',
            "gender": '女',
            "fraction": '89'
        },
        {
            "name": "柳3",
            "age": '9',
            "gender": '女',
            "fraction": '89'
        },
        {
            "name": "柳4",
            "age": '10',
            "gender": '女',
            "fraction": '89'
        }]
    };
    console.log(data);

    //    获取到handlebars这个模板中的全部html内容
    var studentTemp = $('#student-temp').html();

    //    编译
    var HanStudent = Handlebars.compile(studentTemp);

    //把编译完成的代码放入到 .student-temp 的这个容器中
    $('.student-temp').html(HanStudent(data))

</script>

整个页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>each-demo</title>
    <style>
        table, th, td {
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>分数</th>
    </tr>
    </thead>
    <tbody class="student-temp">
    <script type="text/x-handlebars-template" id="student-temp">
        {{#each student}}
        <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
            <td>{{gender}}</td>
            <td>{{fraction}}</td>
        </tr>
        {{/each}}
    </script>
    </tbody>

</table>
<script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="./js/handlebars-v4.0.10.js"></script>
<script>
    //    模拟数据
    var data = {
        "student": [
        {
            "name": "柳2",
            "age": '8',
            "gender": '女',
            "fraction": '89'
        },
        {
            "name": "柳3",
            "age": '9',
            "gender": '女',
            "fraction": '89'
        },
        {
            "name": "柳4",
            "age": '10',
            "gender": '女',
            "fraction": '89'
        }]
    };
    console.log(data);

    //    获取到handlebars这个模板中的全部html内容
    var studentTemp = $('#student-temp').html();

    //    编译
    var HanStudent = Handlebars.compile(studentTemp);

    //把编译完成的代码放入到 .student-temp 的这个容器中
    $('.student-temp').html(HanStudent(data))


</script>
</body>
</html>