前端模板引擎——handlebars

人间小美味695

已于 2022-11-19 21:45:01 修改

阅读量611

点赞数 2

分类专栏：前端 # JavaScript 前端相关文章标签：前端模板引擎 handlebars HTML javascript

于 2021-05-10 10:01:19 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/116274570

版权

JavaScript 同时被 3 个专栏收录

33 篇文章 7 订阅

订阅专栏

前端

25 篇文章 8 订阅

订阅专栏

前端相关

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>handlebars 前端模板引擎——handlebars</title>
    <style>

    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
</head>

<body>
    <div id="container"></div>
    <script type="text/x-handlebars-template" id="template-user">
        {{#each this}}
        <p style="color:grey">key值: {{@key}} index值: {{@index}} 姓名：{{name}}</p>
        <p>邮箱：{{email}}</p>
        <hr> {{/each}}
    </script>
    <script>
        $(function() {
            $.ajax({
                type: 'get',
                url: 'http://jsonplaceholder.typicode.com/users',
                dataType: "json",
                success: function(res) {
                    var newsdata = res;
                    console.log(newsdata);
                    var $container = $('#container');
                    var result = $('#template-user').html();
                    var template = Handlebars.compile(result);
                    var html = template(newsdata)
                    $container.html(html)
                }
            })
        })
    </script>

</body>

</html>