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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
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静态新闻列表自动生成代码
2007/06/14 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
浅析vue深复制
2018/01/29 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python使用MONGODB入门实例
2015/05/11 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
现货白银电话营销话术
2015/05/29 职场文书
美容院管理规章制度
2015/08/05 职场文书