本例展示用Handlebars对一小段简单HTML模板进行渲染填充然后显示在页面。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Handlebars模板填充样例</title> <script type="text/javascript" src="../jquery-2.1.1.min.js"></script> <script type="text/javascript" src="../handlebars-v3.0.1.js"></script> </head> <body> <div id="content"></div> <!-- 模板 --> <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div class="body">{{body}}</div> </div> </script> <script type="text/javascript"> // 编译模板 var source = $("#entry-template").html(); var template = Handlebars.compile(source); // 数据 var data = { title: "My New Post", body: "This is my first post!" } // 用编译后的模板对象，填充渲染JSON数据 $(function () { var html = template(data); $("#content").html(html); // alert(Handlebars.escapeExpression(html)); //对<>进行转义，其在DOM不再具有标签含义。 }) </script> </body> </html>