首页 > 其他 > 详细

Handlebars模板引擎简单使用

时间:2016-01-15 12:48:54      阅读:211      评论:0      收藏:0      [点我收藏+]

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

 

Handlebars模板引擎简单使用

原文:http://www.cnblogs.com/zplogo/p/5132719.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!