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. C#操作word类文件

    最近频繁操作Word文档,写了很多word的操作代码及方法,虽然已经有很多关于word的操作类了,自己还是进行了一下整合: 1.通过模板创建新文件 2.在书签处插入值 3.插入表格 4.合并单元格 5 ...

  2. 一站式学习Wireshark（七）：Statistics统计工具功能详解与应用

    Wireshark一个强大的功能在于它的统计工具.使用Wireshark的时候,我们有各种类型的工具可供选择,从简单的如显示终端节点和会话到复杂的如Flow和IO图表.本文将介绍基本网络统计工具.包括 ...

  3. Java GUI画圆。

    package ydj; import java.awt.*; import javax.swing.*; public class huayuan extends JFrame { public h ...

  4. C语言实现商品销售系统

    商品销售系统 #include<stdio.h> //头文件 #include<string.h> //头文件 #include<stdlib.h> //头文件 # ...

  5. 轻量级ORM框架Dapper应用六：Dapper支持存储过程

    在Entity Framework中讲解了EF如何支持存储过程,同样,Dapper也支持存储过程,只需要在Query()方法的CommandType中标记使用的是存储过程就可以了.在Users表上面创 ...

  6. DBA不可不知的操作系统内核参数

    背景 操作系统为了适应更多的硬件环境,许多初始的设置值,宽容度都很高. 如果不经调整,这些值可能无法适应HPC,或者硬件稍好些的环境. 无法发挥更好的硬件性能,甚至可能影响某些应用软件的使用,特别是数 ...

  7. sparkR could not find function "textFile"

    Yeah, that’s probably because the head() you’re invoking there is defined for SparkR DataFrames[1] ( ...

  8. Hadoop书签

    1)http://www.cnblogs.com/forfuture1978/archive/2010/03/14/1685351.html 2)http://www.cnblogs.com/sund ...

  9. MySQL 常用语法 之 DISTINCT

    DISTINCT作用很简单就是去除重复行的数据. 具体看下面列子 表A数据[两条 nami 99] nameA   scoreA robin    98 nami    99 saber  98 lu ...

  10. am335x LCD背光问题

    /**************************************************************** * am335x backlight problem * * 本问记 ...