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. 分布式理论(4):Leases 一种解决分布式缓存一致性的高效容错机制(转)

    作者:Cary G.Gray and David R. Cheriton 1989 译者:phylips@bmy 2011-5-7 出处:http://duanple.blog.163.com/blo ...

  2. MySQL死锁原因分析

    行级锁有三种模式: innodb 行级锁 record-level lock大致有三种:record lock, gap lock and Next-KeyLocks. record lock  锁住 ...

  3. Yii-模型- criteria查找数据库方法

    数据模型搜索方法: public function search() { // Warning: Please modify the following code to remove attribut ...

  4. php 抽象 继承 多态

    1.继承和重载 !!!php中使用extends单一继承的方法 被继承的类  父类(基类) 继承者   子类(派生类) 如果说我们需要将父类方法重载(方法覆盖),在派生类里使用与基类方法重名的方法名称 ...

  5. JS 播放列表收缩展开

    下面要做实现的效果 收缩和展的功能 遵循网页布局,行为,结构,样式 分离 下面是html 结构代码: <div id="drop" class="down_list ...

  6. 数据库 proc编程九

    第一种动态sql EXEC SQL EXECUTE IMMEDIATE :psql; .仅适用于非select语句 .嵌入SQL语句中不能包含输入宿主变量 void main() { EXEC SQL ...

  7. 机器学习之梯度提升决策树GBDT

    集成学习总结 简单易学的机器学习算法——梯度提升决策树GBDT GBDT(Gradient Boosting Decision Tree) Boosted Tree:一篇很有见识的文章 https:/ ...

  8. MongoDB C Driver Building on Windows

    一.编译mongodb c driver: 需要先安装OpenSSL:(参见:http://bbs.aircheng.com/read-2222-1) 步骤:(MongoDB步) 1.下载Active ...

  9. native生成策略：由Hibernate根据所使用的数据库支持能力从identity、sequence或者等生成策略中选择一种

    increment生成策略:当Hibernate准备在数据库表中插入一条新记录时,首先从数据库表中获取当前主键字段的最大值,然后在最大值基础上加1,作为当前持久化对象的标识符属性值.这种策略即incr ...

  10. （转）mysql执行计划分析

    转自:https://www.cnblogs.com/liu-ke/p/4432774.html MySQL执行计划解读   Explain语法 EXPLAIN SELECT …… 变体: 1. EX ...