脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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，希望大家能够喜欢。

您可能感兴趣的文章:

相关文章

  • javascript设计模式 – 装饰模式原理与应用实例分析

    javascript设计模式 – 装饰模式原理与应用实例分析

    这篇文章主要介绍了javascript设计模式 – 装饰模式,结合实例形式分析了javascript装饰模式基本概念、原理、应用场景及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JavaScript中Function详解

    JavaScript中Function详解

    函数是由关键字function、函数名加一组参数及置于大括号中需要执行的一段语义定义的。今天我们就来详细讲解一下JavaScript中的Function。
    2015-02-02
  • 微信小程序调用腾讯地图API文档JavaScript SDK和WebService API详细解读

    微信小程序调用腾讯地图API文档JavaScript SDK和WebService API详细解读

    本文介绍了如何使用腾讯位置服务,包括申请开发者密钥、获取小程序APPID、下载地图SDK、设置服务器域名白名单等步骤,详细说明了如何在微信小程序中集成腾讯位置服务,进行地图展示和周边搜索等功能的实现,同时提醒注意API的调用次数和权限限制,需要的朋友可以参考下
    2024-09-09
  • 微信小程序中正确使用地图的方法实例

    微信小程序中正确使用地图的方法实例

    微信小程序诞生之初,功能受限于小程序的理念,微信小程序要体现轻量级的应用特点,但在随后不断更新中,API接口很好的为小程序赋能,使其可以在不影响本质的情况下实现完善功能,这篇文章主要给大家介绍了关于微信小程序中正确使用地图的相关资料,需要的朋友可以参考下
    2021-09-09
  • JavaScript面向对象编程实现模拟

    JavaScript面向对象编程实现模拟

    面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟
    2022-10-10
  • js制作简单的音乐播放器的示例代码

    js制作简单的音乐播放器的示例代码

    本篇文章主要介绍了js制作简单的音乐播放器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS中完美兼容各大浏览器的scrolltop方法

    JS中完美兼容各大浏览器的scrolltop方法

    最近用到scrolloTop()想去获取滚动条距离顶部的距离，结果只有chrome下面可以正常的获取scrollTop，ff和ie下这个值都等于0，使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题，今天我们就来详细探讨下。
    2015-04-04
  • 微信小程序实现购物车小功能

    微信小程序实现购物车小功能

    这篇文章主要为大家详细介绍了微信小程序实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 浅谈js中的this问题

    浅谈js中的this问题

    下面小编就为大家带来一篇浅谈js中的this问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 基于JavaScript实现无缝滚动效果

    基于JavaScript实现无缝滚动效果

    这篇文章主要为大家详细介绍了基于JavaScript实现无缝滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论