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. IPFS学习-内容标识符(CIDs)

    内容标识符(CIDs) 内容标识符也称为CID,是用于指向IPFS中材料的标签. 它不会指示内容的存储位置,但会根据内容本身形成一种地址. CID简短,无论其基础内容的大小如何. CID基于内容的加密 ...

  2. jQuery基础之事件处理

    jQuery基础之事件处理方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> < ...

  3. Java 8——重复注解和注解的作用范围的扩大化

    一.重复注解 在某些情况下,希望将相同的注解应用于声明或类型用途.从Java SE 8发行版开始,重复注解使可以执行此操作. 例如,正在编写代码以使用计时器服务,该服务使能够在给定时间或某个计划上运行 ...

  4. torch 中各种图像格式转换

    PIL:使用python自带图像处理库读取出来的图片格式 numpy:使用python-opencv库读取出来的图片格式 tensor:pytorch中训练时所采取的向量格式(当然也可以说图片) PI ...

  5. SQL server 安装成功到使用Sa SQL server验证登录等一系列问题

    使用 Windows 身份验证方式登录 出现错误 无法连接到 本地服务器 解决问题: SQL server配置管理器:服务远程过程调用失败 https://blog.csdn.net/gfjjggg/ ...

  6. JS Navigator

    JS Navigator window.navigator 对象包含有关访问者浏览器的信息. Window Navigator window.navigator 对象在编写时可不使用 window 这 ...

  7. 网页添加Live2D看板娘简易教程

    看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义. 如果想在自己的博客上放一个呆萌的看板娘非 ...

  8. Dockerfile优化

    总结: 1.编写.dockerignore文件 2.容器只运行单个应用 3.将多个RUN指令合并为一个 4.基础镜像的标签不要用latest 5.每个RUN指令后删除多余文件 6.选择合适的基础镜像( ...

  9. 动态数组原理【Java实现】（六）

    前言 接下来我们进入集合学习,看过很多文章一上来就是讲解原理感觉会特别枯燥,任何成熟解决方案的出现都是为了解决问题,若通过实际问题引入然后再来讲解原理想必学起来必定事半功倍,从我写博客的那一天起,我就 ...

  10. java基础(2):注释、关键字、标识符、数据

    1. 注释.关键字与标识符 大家可以安装一个文本编辑软件notepad++,有利于java代码的查看与编写. 1.1 程序注释 通常我们需要在源代码中添加文字用来对进行代码解释说明,但这些文字并不是J ...