Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用;

下面这个是基本的模版表达式,

其中 {{ 和 }} 之间为handlerbars的变量;

<div class="entry">

  <h1>{{title}}</h1>

  <div class="body">

    {{body}}

  </div>

</div>

拓展：Handlebars 的使用

其实就是模板化，这是以前就开始推崇的面向数据编程的一个方式。比如jquery template

web 开发中，js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版，只要你定义一个模版，提供一个json对象，handlebars 就能吧json对象放到你定的模版中，非常方便好用！ 下面直接上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Handlebars demo</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="js/handlebars-1.0.0.beta.6.js"></script>

<script type="text/javascript" src="js/myjs.js"></script>

<style type="text/css"></style>

</head>

<body>

    <h2>Simple handlebars demo</h2>

    <button id="btn_simple">Click me</button>

    <div id="my_div">  

    </div>

    <h2>Handlebars Helpers demo</h2>

    <button id="btn_helper">Click me</button>

    <div id="helper_div">  

    </div>

    <script id="some-template" type="text/x-handlebars-template">

          <table>

            <thead>

              <th>Username</th>

              <th>Real Name</th>

              <th>Email</th>

            </thead>

            <tbody>

              {{#if users}}

                <tr>

                  <td>{{username}}</td>

                  <td>{{firstName}} {{lastName}}</td>

                  <td>{{email}}</td>

                </tr>

              {{else}}

                <tr>

                  <td colspan="">NO users!</td>

                </tr>

              {{/if}}

            </tbody>

          </table>

    </script>

    <script id="helper-template" type="text/x-handlebars-template">

        <div>

          <h1>By {{fullName author}}</h1>

          <div>{{body}}</div>  

          <h1>Comments</h1>  

          {{#each comments}}

          <h2>By {{fullName author}}</h2>

          <div>{{body}}</h2>

          {{/each}}

        </div>

    </script>

</body>

</html>  
$(document).ready(function(){

    Handlebars.registerHelper('fullName', function(person) {

      return person.firstName + " " + person.lastName;

    });

  $("#btn_simple").click(function(){

    // $(this).hide();

    showTemplate();

  });

   $("#btn_helper").click(function(){  

    showHowUseHelper();

  });

});

// var context = {title: "My New Post", body: "This is my first post!"};

var persion = {title :"My New Post",body:"This is my first post!"}

function showTemplate(){

    var source   = $("#some-template").html();

    var template = Handlebars.compile(source);

      var data = { users: [

          {username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },

          {username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },

          {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }

        ]};

      $("#my_div").html(template(data));;

}  

function showHowUseHelper(){

    var context = {

      author: {firstName: "Alan", lastName: "Johnson"},

      body: "I Love Handlebars",

      comments: [{

        author: {firstName: "Yehuda", lastName: "Katz"},

        body: "Me too!"

      }]

    };

    var source   = $("#helper-template").html();

    var template = Handlebars.compile(source);

    $("#helper_div").html(template(context));;  

}

.

模版引擎Handlebars和Mustache的更多相关文章

  1. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  2. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  3. Express学习 ------模版引擎(handlebars)

    Handlebars一款js模版引擎,我们在做客户端开发的时候,也可能已经使用过.它语法比较简单,和我们平常写的html 一样,只不过html 中可以加入handlebars 表达式. handleb ...

  4. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  5. js模版引擎handlebars.js实用教程——each-循环中使用this

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  6. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  7. js模版引擎handlebars.js实用教程——循环中使用索引

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  8. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  9. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. Microsemi Libero使用技巧——查看芯片资源占用情况

    前言 与MCU不同,FPGA的资源主要包括:逻辑资源,IO资源,Flash大小,PLL资源,SoC硬核处理器资源等,其中逻辑资源和IO资源是我们主要关心的,本篇文章将介绍,如何通过Microsemi ...

  2. 【重要更新】Senparc.Weixin SDK v6.5 升级说明（支持 .NET Core 3.0 及分布式消息上下文）

    Senparc.Weixin SDK v6.5 开始支持 .NET Core 3.0,并将微信消息上下文进行了大幅度的重构,支持了使用分布式缓存存储上下文信息,这意味着在分布式系统中,现在 Senpa ...

  3. 流程图软件 drawio 免费 github开源

    做程序需要画流程图,发现迅捷流程图的在线版挺好用的,但是,它的导出只允许VIP会员,不是VIP会员只能导出xsd文件,而且要注册账号,极为麻烦. 在知乎看到了一位网友的评论,有一款软件和迅捷流程图一模 ...

  4. Windows下RabbitMQ 的下载、配置、Java实现生产者和消费者例子

    RabbitMQ是一个轻量级的消息代理中间件,支持多种消息通信协议,支持分布式部署,支持运行于多个操作系统,具有灵活.高可用等特性.RabbitMQ支持多种协议,其中最为重要的是高级消息队列协议(AM ...

  5. 安装CentOS 6.x报错"Disk sda contains BIOS RAID metadata"解决方法

    今天在安装CentOS 6.2的时候,当进到检测硬盘的时候,总是过不去,报错如下: Disk sda contains BIOS RAID metadata, but is not part of a ...

  6. oracle创建新用户并授予权限

    1.同时按下WIN键+R键打开“运行”,输入cmd,回车进入命令提示符 2.输入“sqlplus”后按下回车键,提示输入用户名,输入“sys as sysdba”,按下回车,输入口令,即四-13中设置 ...

  7. day99_12_3numpy的索引以及pandas的两个数据结构。

    一.索引与切片. nump的索引和python中的索引差不多,都是左开右闭区间. 如一个普通的array的索引,是由0开始的: res = np.array([1,2,3,4,5]) #### npa ...

  8. 11. Go 语言网络编程

    Go 语言网络编程 Go语言在编写 web 应用方面非常得力.因为目前它还没有 GUI(Graphic User Interface 图形化用户界面)的框架,通过文本或者模板展现的 html 界面是目 ...

  9. 在mysql中如何写注释

    MySql--三种注释写法 #这是注释/*注释内容*/ --  注释   (--与注释内容之间必须加空格)

  10. Vue 小练习01

    有红, 黄, 蓝三个按钮, 以及一个200X200px的矩形box, 点击不同的按钮, box的颜色会被切换为指定的颜色 <!DOCTYPE html> <html lang=&qu ...