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获取当前ip的代码
May 10 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 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 分页原理分析,大家可以看看
2009/12/21 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
python条件和循环的使用方法
2013/11/01 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
python绘制直线的方法
2018/06/30 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
《黄山奇石》教学反思
2014/04/19 职场文书
人事文员岗位职责
2015/02/04 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
党性修养心得体会2016
2016/01/21 职场文书
浅谈python中的多态
2021/06/15 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python