脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript页面模板库handlebars的简单用法

JavaScript页面模板库handlebars的简单用法

 更新时间：2015年03月02日 08:52:16   投稿：hebedich  
本文主要是给大家分享的一个javascript页面模板库Handlebars的简单用法，可以帮助大家轻松的构建语义化模板，非常的实用，推荐给大家。

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，希望大家能够喜欢。

您可能感兴趣的文章:

相关文章

  • 微信小程序实现手势滑动卡片效果

    微信小程序实现手势滑动卡片效果

    这篇文章主要为大家详细介绍了微信小程序实现手势滑动卡片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-08-08
  • 微信小程序后端无法保持session的原因及解决办法问题

    微信小程序后端无法保持session的原因及解决办法问题

    这篇文章主要介绍了微信小程序后端无法保持session的原因及解决办法问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Firefox+FireBug使JQuery的学习更加轻松愉快

    Firefox+FireBug使JQuery的学习更加轻松愉快

    FireBug是FireFox下最强大的调试插件.利用它，可以让JQuery的学习过程更加轻松愉快.
    2010-01-01
  • JavaScript制作简单分页插件

    JavaScript制作简单分页插件

    本文给大家分享的是JavaScript制作的一个兼容IE6+以及主流浏览器的分页插件，非常的不错，有需要的小伙伴可以参考下
    2016-09-09
  • 访问百度和谷歌网速测试的javascript代码

    访问百度和谷歌网速测试的javascript代码

    访问百度和谷歌网速测试的javascript代码...
    2007-08-08
  • 详解堆的javascript实现方法

    详解堆的javascript实现方法

    最近因为工作需要，要深入的学习JavaScript，发现如果囫囵吞枣印象就是不深刻，自己去练习一下才能慢慢有点感觉。本文主要是详解堆的javascript实现方法，另外堆排序对我们来说太耳熟而又少用的情况下，本文当作一次复习。感兴趣的朋友们下面来一起看看吧。
    2016-11-11
  • 文本框只能输入数字的实现方法(兼容IE火狐)

    文本框只能输入数字的实现方法(兼容IE火狐)

    下面小编就为大家带来一篇文本框只能输入数字的实现方法(兼容IE火狐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 关于JS中的apply,call,bind的深入解析

    关于JS中的apply,call,bind的深入解析

    下面小编就为大家带来一篇关于JS中的apply,call,bind的深入解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-04-04
  • javascript html5移动端轻松实现文件上传

    javascript html5移动端轻松实现文件上传

    这篇文章主要为大家详细介绍了javascript html5移动端轻松实现文件上传的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript中net::ERR_CONNECTION_REFUSED解决方法大全

    JavaScript中net::ERR_CONNECTION_REFUSED解决方法大全

    在一次测试中遇到了报net::ERR_CONNECTION_REFUSED的错误,五哦一下面这篇文章主要给大家介绍了关于JavaScript中net::ERR_CONNECTION_REFUSED解决方法的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论