JavaScript页面模板库handlebars的简单用法


Posted in Javascript onMarch 02, 2015

Handlebars 是一个 JavaScript 页面模板库,帮助你轻松的构建语义化模板。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>handlebars</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="${base}/js/jquery1.11.min.js"></script>

<script src="${base}/js/handlebars-v3.0.0.js"></script>

</head>

<body>

    <div id=tt style='display: none'>

        <div class="entry">

            <h1>{{title}}</h1>

            <div class="body">{{body}}</div>

        </div>

    </div>

</body>

<script type="text/javascript">

    //$('#tt').before('<script id="temp" type="sfd">');

    //$('#tt').after("</ script>");//

    var source = $("#tt").html();

    //alert(source);

    var template = Handlebars.compile(source);

    var data = {title: "My New Post" , body: "This is my first post!"

    };

    var result = template(data);//将数据 填充到模板

    console.log(result);

    $('#tt').before(result);

</script>

</html>

示例很简单,具体详情可参考ThinkVitamin的文章 Getting Started with Handlebars.js,希望大家能够喜欢。

Javascript 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
Jquery之美中不足小结
Feb 16 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
jquery自定义表格样式
Nov 23 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
详解jQuery事件
Jan 13 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 #Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 #Javascript
EasyUI实现第二层弹出框的方法
Mar 01 #Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 #Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 #Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 #Javascript
EasyUI中combobox默认值注意事项
Mar 01 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php导入模块文件分享
2015/03/17 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
javascript数据类型详解
2017/02/07 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python多线程同步实例教程
2019/08/11 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python使用进程Process模块管理资源
2020/03/05 Python
中专生毕业自我鉴定
2013/11/01 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
音乐器材管理制度
2014/01/31 职场文书
七一党日活动总结
2014/07/08 职场文书
爱的承诺书
2015/01/20 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Spring Boot实现文件上传下载
2022/08/14 Java/Android