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 js cookie的存储,获取和删除
Dec 29 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Numpy数组转置的两种实现方法
2018/04/17 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
少先队入队活动方案
2014/02/08 职场文书
刑事案件上诉状
2015/05/23 职场文书
老兵退伍感言
2015/08/03 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL