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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python 写一个性能测试工具(一)
2020/10/24 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
甜点店创业计划书
2014/01/27 职场文书
员工入职担保书范文
2014/04/01 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
普宁寺导游词
2015/02/04 职场文书
小学课改工作总结
2015/08/13 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers