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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
Javascript String.replace的妙用
Sep 08 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
JS实现可视化文件上传
Sep 08 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
Vue实现简单的跑马灯
May 25 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命令行使用方法和命令行参数说明
2014/04/08 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[19:15]DK战队纪录片
2014/09/02 DOTA
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python中turtle作图示例
2017/11/15 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
物业总经理岗位职责
2014/02/28 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
中秋晚会致辞
2015/07/31 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
python中print格式化输出的问题
2021/04/16 Python