handlebars.js基础学习笔记

最新推荐文章于 2025-10-18 11:25:50 发布

原创最新推荐文章于 2025-10-18 11:25:50 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#handlebar

java 同时被 2 个专栏收录

42 篇文章

订阅专栏

模板技术

1 篇文章

订阅专栏

本文介绍了一种流行的JavaScript模板引擎Handlebars的基础用法。通过一个简单的示例展示了如何使用Handlebars来渲染JSON数据到HTML中，包括加载模板、编译模板及应用数据等关键步骤。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html lang="en">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
        <title>handlebars基础用法</title>  
        <script type="text/javascript" src="jquery.js"></script>  
        <script type="text/javascript" src="handlebars.js"></script>  
    </head>  
    <body>  
        <div id="list">  
            <script id="template" type="text/x-handlebars-template">  
                <h3>{{title}}</h3>  
                <p>{{content}}</p>  
            </script>  
        </div>  
      
        <script type="text/javascript">  
            $(document).ready(function() {  
            //模拟json对象  
            var data = {  
                        "title":"中国",  
                        "content":"中华人名共和国"  
                    };  
            var template = $("#template").html();//jquery用法，获取模板代码  
            var myTemplate = Handlebars.compile(template);//注册Handlebars模板  
              
            var html = myTemplate(data);//封装json对象，生成HTML代码  
            $('#list').html(html);//jquery用法，将生成的html代码替换template模板  
          });  
        </script>  
    </body>  
    </html>