handlebars的使用_handlebar 数组-CSDN博客

本文链接：https://blog.csdn.net/qq_39368007/article/details/107962710
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="handlebars-v4.7.6.js"></script>
    <script src="jQuery v3.5.1.js"></script>
    <style>
        .card {
            font-size: 30px;
            float: left;
            margin: 20px;
            background-color: pink;
        }
    </style>
    <script id="card-template" type="text/x-handlebars-template">
        <!-- 数组里面的元素循环 用的是 each  -->
        {{#each this}}
    <div class="card">

        <div>{{chinese @index}}</div>

        <div>姓名：{{name}}</div>
        {{#if birth}}
        <div>出生日期:{{birth}}</div>
        {{/if}}
        <div>出生地：{{home}}</div>
        {{#if job}}
        <div>职业：{{job}}</div>
        {{/if}}
        <ul>
            {{#each books}}
            <li {{#isfirst @index}} style="color:red;" {{/isfirst}} 
            {{#if ../blue}} style="color: blue;"{{/if}}  >
                {{addone @../index}}-{{addone @index}}-{{this}}
            </li>
            {{/each}}
        </ul>
    </div>
    {{/each}}
    </script>
</head>

<body>
    <!--  div.card > div*4  -->
    <div id="card">

    </div>
    <script>
        var data = [
            {
                name: '无UR恶意法国人',
                birth: '1997-11-15',
                home: '美国洛杉矶',
                job: '网咯烦人符合',
                books: [
                    '《结构化土》',
                    '《幡然改途如何》',
                    '《热汤4一头热好的 》'
                ]
            },
            {
                name: '止小兮',
                birth: '1999-11-15',
                home: 'dgr洛杉矶',
                job: '人的忍辱含垢'
            },
            {
                name: '苍小凌',
                home: 'dgr洛杉矶',
                books: [
                    '《三四个号》',
                    '《Rey遇到5护体乳问题热议》'
                ]
            }
        ]

        Handlebars.registerHelper('chinese', function (value) {
            var arr = ['一', '二', '三'];
            if (this.books && this.books.length > 2) {
                this.blue = 1;
            }
            return arr[value];
        })

        Handlebars.registerHelper('addone', function (value) {
            return value + 1;
        })

        Handlebars.registerHelper('isfirst', function (value, options) {
            if (value == 0) {
                return options.fn(this);
            }
        })

        // Handlebars.registerHelper('isBlue', function (value, options) {
        //     if (value && value.length > 2) {
        //         return options.fn(this);
        //     }
        // })

        var t = $('#card-template').html();    // 1
        var f = Handlebars.compile(t);        // 2 
        var h = f(data);                     // 3
        $('#card').html(h);                //4
    </script>
</body>

</html>