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实现计算两个日期的间隔天数
Aug 14 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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 项目的方法
2007/01/02 PHP
php设计模式小结
2013/02/15 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php中__toString()方法用法示例
2016/12/07 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python全局变量用法实例分析
2016/07/19 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python实现决策树分类(2)
2018/08/30 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
意大利男装网店:Vrients
2019/05/02 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
八年级生物教学反思
2014/01/22 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
停电放假通知
2015/04/14 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python