美文网首页
2.handlebars(each使用)

2.handlebars(each使用)

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

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

相关文章

  • 2.handlebars(each使用)

    在handlebars(基础一)中简单的渲染了页面,但是在真实的开发中后台给我们的数据往往是嵌套关系的,我们不止渲...

  • 2.handlebars(each使用)

    在handlebars(基础一)中简单的渲染了页面,但是在真实的开发中后台给我们的数据往往是嵌套关系的,我们不止渲...

  • jQuery源码二周目#5 迭代器

    each迭代器 jQuery的each方法从使用上就要分2种情况:$.each()$(selector).each...

  • handlebars

    快速开始 each的基本使用

  • Perl的each操作符

    16. each 操作符 从 Perl 5.12开始,数组也可以使用each操作符; 数组调用each,会返回数组...

  • jQuery 常用方法小结

    jQuery 常用方法小结 each方法 有了隐式迭代,为什么还要使用each函数遍历?

  • 遍历方法比较 forEach,each(),every()

    1 $.each() jquery中遍历数组,可返回索引和对应值; 使用方法 :$.each(arr,functi...

  • Array.every方法介绍

    在说every时,先来看一下forEach与jquery.each jquery.each使用用法: Array....

  • 获取表单内容

    1、jquery获取字符串形式 2、jquery获取数组形式 3、each()注意:each可以使用分别获取不用类...

  • 提示58-59

    第58条 for-each循环优先于传统的for循环 for-each 相较于使用迭代器或者传统for循环遍历数组...

网友评论

      本文标题:2.handlebars(each使用)

      本文链接:https://www.haomeiwen.com/subject/ggzunftx.html