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. Hibernate-HQL&QBC基础使用（分页）

    @Test public void testHql() { Configuration configuration = new Configuration().configure(); Session ...

  2. node-webkit播放目录下所有网页文件

    1.编写index.html文件 这里我们需要播放某一个目录下所有的网页文件,要做到切换不同的网页,可以在index.html中使用iframe.通过js动态改变iframe的src属性,从而动态地切 ...

  3. 最大似然估计 （MLE）与 最大后验概率（MAP）在机器学习中的应用

    最大似然估计 MLE 给定一堆数据,假如我们知道它是从某一种分布中随机取出来的,可是我们并不知道这个分布具体的参,即“模型已定,参数未知”. 例如,对于线性回归,我们假定样本是服从正态分布,但是不知道 ...

  4. Spring 4 官方文档学习（十一）Web MVC 框架之themes

    http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-themeresolver ...

  5. php Laravel 框架之建立后台目录

    今天研究了在Laravel框架中的控制器中加入后台的目录.发现了一些小的规律,拿来和大家分享一下吧. 通常情况下,我们是直接在controllers目录中加入我们的控制器,然后再routes.php ...

  6. erlang 自定义函数的初步应用

    一.模块内调用 1> AA=fun(BB)-> io:format("this is test args ~s~n",[BB]) end.#Fun<erl_eva ...

  7. 【Java面试题】58 char型变量中能不能存贮一个中文汉字?为什么?

    char型变量是用来存储Unicode编码的字符的,unicode编码字符集中包含了汉字,所以,char型变量中当然可以存储汉字啦.不过,如果某个特殊的汉字没有被包含在unicode编码字符集中,那么 ...

  8. jquery获取html元素的绝对位置和相对位置的方法

    绝对位置坐标: 代码如下: $("#elem").offset().top$("#elem").offset().left 相对父元素的位置坐标: 代码如下: ...

  9. [转]ASP.NET MVC 5 - 将数据从控制器传递给视图

    在我们讨论数据库和数据模型之前,让我们先讨论一下如何将数据从控制器传递给视图.控制器类将响应请求来的URL.控制器类是给您写代码来处理传入请求的地方,并从数据库中检索数据,并最终决定什么类型的返回结果 ...

  10. 单选按钮选中指定value值

    $("input[name='BlogStatus'][value='" + rep.data.Status + "']").prop("checke ...