Handlebars模板引擎简单使用

　　本例展示用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>