zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    WEB
    Java
    数据库
    node笔记(持续更新)
    mysql数据库关于表的操作
    flutter 文本 更多 收起
    flutter 处理时间字符串
    flutter 轮播图动态加载网络图片
    写flutter项目之一脚一个坑,持续踩坑中
    flutter json数据解析
  • 原文地址:https://www.cnblogs.com/zplogo/p/5132719.html
Copyright © 2011-2022 走看看