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.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
javascript常用经典算法详解
Jan 11 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
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
ftp类(myftp.php)
2006/10/09 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php中static和const关键字用法分析
2016/12/07 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
python爬虫使用cookie登录详解
2017/12/27 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python 切分数组实例解析
2019/11/07 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python 实现简单的客户端认证
2020/07/29 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
生产车间主管岗位职责
2013/12/28 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
大学生求职信范文应怎么写
2014/01/01 职场文书
个人现实表现材料
2014/02/04 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js