<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>handlebars.min.js的使用</title>
</head>
<body>
    <ul id="append_ul">
    </ul>
</body>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/handlebars.min.js" type="text/javascript"></script>
<!-- 预编译模板 -->
<script id="appendTemplate" type="text/x-handlebars-template">
        {{description.escaped}}
        {{example}}
        <br><br>
        {{description.unescaped}}
        {{{example}}}
</script>
<script type="text/javascript">
    $(function(){
        // 1.获取模板
        var html = $("#appendTemplate").html();
        // 2.编译模板
        var compile_html = Handlebars.compile(html);
        // 3.定义数据
        var context = {
            "description": {
                "escaped": "Using {{}} brackets will result in escaped HTML:",
                "unescaped": "Using {{{}}} will leave the context as it is:"
            },
            "example": "<button> Hello </button>"
        };
        // 4.传送数据
        var append_html = compile_html(context);
        // 5.追加html
        $("#append_ul").append(append_html);
    });
</script>
</html>

handlebars.min.js的使用的更多相关文章

  1. Mvc 之System.Web.Optimization 压缩合并如何让*.min.js 脚本不再压缩

    最近项目中用到了easy ui ,但是在配置BundleConfig 的时候出现了问题,easy ui的脚本jquery.easyui.min.js 压缩后出现各种脚本错误,总是莫名其妙的 i标量错误 ...

  2. html5shiv.js and respond.min.js

    因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...

  3. min.js反压缩

    给个网址自己体会.. http://jsbeautifier.org/ 当需要修改min.js中的代码时,把min.js文件ctrl+c   ctrl+v扔到上面的网页里,点击beautify 即可

  4. 让IE系列支持HTML5的html5shiv.js和respond.min.js

    HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...

  5. MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案

    1.选中报错的jquery文件例如"jquery-1.8.0.min.js". 2.右键选择 MyEclipse-->Exclude From Validation . 3. ...

  6. 项目里的jquery.min.js错误

    项目里的jquery.min.js报一系列 - Missing semicolon - Missing semicolon - Missing semicolon - Missing semicolo ...

  7. spring访问静态资源出错，No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...

    问题:spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js... web.x ...

  8. angularjs中 *.min.js.map 404的问题

    初次使用AngularJS,在chrom调试的时候,出现如下问题: GET http://localhost:63342/luosuo/visitor/js/lib/angular-animate.m ...

  9. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. 记踩坑--Flask Web开发：S6电子邮件 ----[Errno 11004] getaddrinfo failed

    必须要记录下踩过的坑,一来,为后来者铺路,二来,实在摔得疼,提醒自己写代码要谨小慎微. [Errno 11004] getaddrinfo failed 1.先排除邮箱账号和授权码的错误 测试如下代码 ...

  2. Python案例

    我感觉好方啊,Python和C语言不一样啊....写了几个例子... 变量    变量的占位后面没有逗号啊啊啊啊 name='张泉' age=22 tel=110 print ('姓名:%s,年龄:% ...

  3. windows下非管理员权限安装mysql

    windows下,mysql有两种安装方式: 1.msi安装 2.zip安装 无论是哪种安装方式,都因为需要将mysql安装为一个服务,所以必须要以管理员权限安装. 因为公司的换了虚拟机,无法取得管理 ...

  4. Spark记录-官网学习配置篇（二）

    ### Spark SQL Running the SET -v command will show the entire list of the SQL configuration. #scala/ ...

  5. NAT地址转换

    2017年1月12日, 星期四 NAT地址转换 SNAT:源地址转换  DNAT:目标地址转换   null

  6. [C]语法, 知识点总结(二. 结构体, 类别名, static, const)

    结构体 定义: struct Student{ // 定义结构体Student, stu是创建的对象         char a[17]; // 结构体里面可以有多种不同类型的变量         ...

  7. JavaScript事件模拟元素拖动

    一.前言: 最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等 ...

  8. 微软官网给出CSS选择器支持列表

    CSS Compatibility and Internet Explorer 这是在 @司徒正美 博客里看到的,所以搬到自己博客,收藏下..正如司徒兄所说,微软太狡滑了,如果把不支持的属性用红色标示 ...

  9. Linux - seq 预设外部命令

    seq 是Linux 中一个预设的外部命令,一般用作一堆数字的简化写法. 常用参数: # 不指定起始数值,则默认为 1 -s # 选项主要改变输出的分格符, 预设是 \n -w # 等位补全,就是宽度 ...

  10. linux usb枚举过程分析之守护进程及其唤醒【转】

    转自:http://blog.csdn.net/xuelin273/article/details/38646765 usb热插拔,即usb设备可以实现即插即用,像U盘一样,插到电脑里就可以用,不用时 ...