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 闭包
Sep 15 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
vue实现下拉菜单树
Oct 22 Javascript
JavaScript数组 几个常用方法总结
Nov 11 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
解析php中反射的应用
2013/06/18 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jquery中动态效果小结
2010/12/16 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
python 性能优化方法小结
2017/03/31 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers