web 开发中，js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版，只要你定义一个模版，提供一个json对象，handlebars 就能吧json对象放到你定的模版中

html代码

    <!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="3">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>

js代码

    $(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的使用的更多相关文章

  1. Handlebars 模板引擎之前后端用法

    前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...

  2. handlebars自定义helper的写法

    handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性,我个人特别喜欢.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式 ...

  3. handlebars.js的运用与整理

    最近在做部门的技术分享网站,主要是一些文章的列表和演讲信息展示,内容比较规律,复用性较高.同事推荐了 handlebars.js.用来看看. handlebars.js是一种静态JS模板,用起来还蛮简 ...

  4. Express 4 handlebars 不使用layout写法

    Express 4 handlebars 不使用layout写法 Express node nodejs handlebars layout 最近刚开始学习使用nodejs. 使用express搭建了 ...

  5. Handlebars.js的学习

    写在开头的话: 在使用Ghost搭建自己的博客的时候,发现不会Handlebars.js寸步难行,所以本人决定学习下Handlebars.js,因此在此做个记录 为什么选择Handlebars.js ...

  6. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  7. Handlebars块级Helpers

    1.Handlebars简单介绍: Handlebars是JavaScript一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less templat ...

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

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

  9. handlebars.js 用 <br>替换掉 内容的换行符

    handlebars.js 用 <br>替换掉 内容的换行符 JS: Handlebars.registerHelper('breaklines', function(text) { te ...

  10. 【前端】制作一个handlebars的jQuery插件

    (function($) { var compiled = {}; $.fn.handlebars = function($srcNode, data) { // 取出模版内容 var src = $ ...

随机推荐

  1. IOS中摇一摇实现截屏(可实现问题反馈的功能)

    有一段时间没有更新博客了,今天更新一篇关于最近工作中用到的一个功能,先简单描述一下:我们知道,测试人员在测试客户端产品时,当出现问题或者BUG的时候,都得先对页面截图,然后从相册中选择截图,加上一段描 ...

  2. OpenMediaVault的OwnCloud扩展不支持NTFS格式硬盘

    来源https://forum.openmediavault.org/index.php/Thread/15510-OwnCloud-Operation-not-supported-setfacl/ ...

  3. 关于Unity中UI中的Slider，Toggle和InputField等节点

    一.Slider节点 1.创建一个Canvas 2.对Canvas进行一些初始化操作 3.创建一个Image的UI节点在Canvas下面作为子节点 4.把Image铺满整个Canvas,把宽高设置为6 ...

  4. chrome浏览器插件推荐——Vimium 篇

    Vimium 是chrome底下的一个插件,所有chrome浏览器或者是基于chrome内核的浏览器(比如我用的Vivaldi)都可以使用这个插件.它提供了大量快捷键来方便键盘党浏览网页.目前在Chr ...

  5. vue2.0动态添加组件

    方法一.<template> <input type="text" v-model='componentName'> <button @click=' ...

  6. 【转】WCF入门教程三[WCF的宿主]

    一.WCF服务应用程序与WCF服务库 我们在平时开发的过程中常用的项目类型有“WCF 服务应用程序”和“WCF服务库”. WCF服务应用程序,是一个可以执行的程序,它有独立的进程,WCF服务类契约的定 ...

  7. Java logger组件：slf4j, jcl, jul, log4j, logback, log4j2

    先说结论 建议优先使用logback 或 log4j2.log4j2 不建议和 slf4j 配合使用,因为格式转换会浪费性能. 名词:jcl 和 jul 标题中的 jcl 是 apache Jakar ...

  8. 下载最新android adt的方法

    作为一名android开发人员,需要经常更新最新版本的 android adt,但是直接到官网去找很难找到下载的链接,通过下面现成的链接,你就能够直接下载最新的android adt了, 网址是:de ...

  9. erlang和java的socket通讯----最简单，初次实现。

    直接上源码,留做纪念. 有点简单,大家不要笑,初次实现. 功能描述:java发送数据给erlang,erlang将收到的数据重复两次再发送给java. erlang源码:模块tcp_listen -m ...

  10. 页面的checkbox框的全选与反选

    if (typeof jQuery == 'undefined') {     alert("请先导入jQuery");} else {    jQuery.extend({    ...