转：http://rfyiamcool.blog.51cto.com/1030776/1278620

我们在开发的时候针对DOM操作，用简单的JS应用来说不成问题，但如果你对视图的每次更新都需要对我文档中非常大量的块进行操作呢？这时JS模版就派上用场了。

源地址：http://rfyiamcool.blog.51cto.com/1030776/1278620

这是一个实例，我们可以把json的数据，按照自己的想法嵌入到模板里面。

<!DOCTYPE html>

<html>

  <head>

    <title>Handlebars Expressions Example</title>

  </head>

  <body>

    <h1>Handlebars Expressions Example!</h1>

<!--this is a list which will rendered by handlebars template.    -->

    <div id="list">

    </div>

    <script type="text/javascript" src=\'#\'" /jquery.js"></script>

    <script type="text/javascript" src=\'#\'" /handlebars-1.0.0.beta.6.js"></script>

    <script id="people-template" type="text/x-handlebars-template">

      {{#people}}

        <div class="person">

          <h2>{{first_name}} {{last_name}}</h2>

          <div class="phone">{{phone}}</div>

          <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>

          <div class="since">User since {{member_since}}</div>

        </div>

      {{/people}}

    </script>

    <script type="text/javascript">

      $(document).ready(function() {

        // compile our template

        var template = Handlebars.compile($("#people-template").html());

        var data = {

          people: [

            { first_name: "rui", last_name: "fengyun", phone: "", email: "alan@test.com", member_since: "Mar 25, 2011" },

            { first_name: "Allison", last_name: "House", phone: "", email: "allison@test.com", member_since: "Jan 13, 2011" },

            { first_name: "Nick", last_name: "Pettit", phone: "", email: "nick@test.com", member_since: "Apr 9, 2009" },

            { first_name: "Jim", last_name: "Hoskins", phone: "", email: "jim@test.com", member_since: "May 21, 2010" },

            { first_name: "Ryan", last_name: "Carson", phone: "", email: "ryan@test.com", member_since: "Nov 1, 2008" }

          ]

        };

        $('#list').html(template(data));

      });

    </script>

  </body>

</html>

看到这个例子，大家感觉很爽吧~  就是这样。。 我们可以通过后端取数据，然后扔到前端，而不用写各种 "" <> ''的分离符号。

进行遍历里面的数据，print出来

<script id="each-template" type="text/x-handlebars-template">

  {{#each people}}

    ... output person's info here...

  {{/each}}

</script>

　　

有数据的话，进行数据渲染

<script id="each-template" type="text/x-handlebars-template">

  {{#if people}}

    ... output person's info here...

  {{/if}}

</script>

　　

没有数据的话，就写没有数据

<script id="each-template" type="text/x-handlebars-template">

  {{#unless people.length}}

    There aren't any people.

  {{/unless}}

</script>

　　

if else 关联的判断

<script id="each-template" type="text/x-handlebars-template">

  {{#if people.length}}

    ... output person's info here...

  {{else}}

    There aren't any people.

  {{/if}}

</script>

　　

Handlebars.registerHelper('list', function (items, options)

items是后面的key值，options是handlebars取值用的

 <!DOCTYPE html>

 <html>

   <head>

     <title>Handlebars Block Expressions Example</title>

   </head>

   <body>

     <h1>Handlebars Expressions Example!</h1>

 <!--this is a list which will rendered by handlebars template.    -->

     <div id="list">

     </div>

     <script type="text/javascript" src=\'#\'" /jquery.js"></script>

     <script type="text/javascript" src=\'#\'" /handlebars-1.0.0.beta.6.js"></script>

     <script id="people-template" type="text/x-handlebars-template">

         {{#list people}}

             {{first_name}} {{last_name}}  {{phone}} {{email}} {{member_since}}

         {{/list}}

     </script>

     <script type="text/javascript">

       $(document).ready(function() {

         // compile our template

         var template = Handlebars.compile($("#people-template").html());

         Handlebars.registerHelper('list', function (items, options) {

             var out = "<div>";

             for (var i = , l = items.length; i < l; i++) {

                 out = out + "<div>" + "<h5>"+options.fn(items[i])+"</h5>" + "</div> jiewei";

             }

             return out + "</div>";

         });

         var data = {

           people: [

             { first_name: "Alan", last_name: "Johnson", phone: "", email: "alan@test.com", member_since: "Mar 25, 2011" },

             { first_name: "Allison", last_name: "House", phone: "", email: "allison@test.com", member_since: "Jan 13, 2011" },

             { first_name: "Nick", last_name: "Pettit", phone: "", email: "nick@test.com", member_since: "Apr 9, 2009" },

             { first_name: "Jim", last_name: "Hoskins", phone: "", email: "jim@test.com", member_since: "May 21, 2010" },

             { first_name: "Ryan", last_name: "Carson", phone: "", email: "ryan@test.com", member_since: "Nov 1, 2008" }

           ]

         };

         $('#list').html(template(data));

       });

     </script>

   </body>

 </html>

我在value加了div和h5的便签，通过开发者用具可以看到。

列表的话，有个和jinja2很像的格式。

<div id="list">

    </div>

    <script type="text/javascript" src=\'#\'" /jquery.js"></script>

    <script type="text/javascript" src=\'#\'" /handlebars-1.0.0.beta.6.js"></script>

    <script id="people-template" type="text/x-handlebars-template">

      {{#each people}}

        <div class="person">

            {{this}}

        </div>

      {{/each}}

    </script>

    <script type="text/javascript">

        $(document).ready(function () {

            // compile our template

            var template = Handlebars.compile($("#people-template").html());

            var data = {

                people: [

              "Alan Johnson" ,

              "Allison House" ,

              "Nick Pettit",

              "Jim Hoskins",

              "Ryan Carson"

            ]

            };

            $('#list').html(template(data));

        });

    </script>

　　

要是想动态的抓数据，那就用ajax来搞。

$("button").click(function(){

  $.getJSON("demo_ajax_json.js",function(result){

   //result 就是值

    });

  });

});

　　

我们可以把把result的值扔到模板里面~

$(document).ready(function() {

            $('#btn1').click(function() {

                $.ajax({

                    type: "POST",   //使用Post方式请求

                    contentType: "application/json",

                    url: "Default2.aspx/HelloWorld",

                    data: "{}",  //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到

                    dataType: 'json',   //会返回Json类型

                    success: function(result) {     //回调函数，result，返回值

                        //result 是我们需要的值。。。。

                    }

                });

            });

        });

        //有参数调用

　　

为什么使用 Handlebars.js？

赞成

  • 它是一个弱逻辑模板引擎

  • 你可以在服务端预编译模板

  • 支持 Helper 方法

  • 可以运行在客户端和服务端

  • 在模板中支持 `this` 的概念

  • 它是 Mustache.js 的超集

  • 你能想到其他的吗？

反对

  • 你能想到任何理由吗？

总结~    这是一个很棒的js模板引擎~  当然功能上没有backbone.js  angularjs.js  强大，但是他的优点很明显，就是小数据的展现还是相当的容易的。

Javascript模板引擎handlebars使用实例及技巧的更多相关文章

  1. JavaScript模板引擎Handlebars

    Handlebars模板库简单介绍 Handlebars是JavaScript一个语义模板库,通过对view(模板)和data(ajax请求的数据,一般是json)的分离来快速构建Web模板.它采用& ...

  2. Javascript模板引擎handlebars使用

    源地址:http://rfyiamcool.blog.51cto.com/1030776/1278620 代码示例: <!DOCTYPE html> <html> <he ...

  3. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  4. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  5. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  6. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  7. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  8. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  9. JavaScript 模板引擎实现原理解析

    1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...

随机推荐

  1. WPF 3D 小小小小引擎 - ·WPF 3D变换应用

    原文:WPF 3D 小小小小引擎 - ·WPF 3D变换应用 WPF可以提供的3D模型使我们可以轻松地创建3D实体,虽然目前来看还很有一些性能上的问题,不过对于一些简单的3D应用应该是可取的,毕竟其开 ...

  2. 【Linux安全】chattr命令锁定账户敏感文件

    有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的linux ...

  3. linux如何安装jdk

    一.安装 创建安装目录,在/usr/java下建立安装路径,并将文件考到该路径下: # mkdir /usr/java 1.jdk-6u11-linux-i586.bin 这个是自解压的文件,在lin ...

  4. Java：List,ArrayList和LinkList的区别

    1.大学数据结构中ArrayList是实现了基于动态数组的数据结构,LinkList基于链表的数据结构 2.对于随机访问get和set,ArrayList优于LinkList,因为LinkedList ...

  5. cocos2d-x 2.2 开发手记2

    终于搞定了  吧后面没写的补上 装完那一堆更新,再来运行原生的项目,嗯,看见 模拟器啦 oh,yeah~~ 额,开心早了,由于我的机器实在有点老了 内存只有可怜的 2GB 这在官方里面写的是不能运行 ...

  6. hadoop异常： 到目前为止解决的最牛逼的一个异常（java.io.IOException: Incompatible clusterIDs）

    (注意: 本人用的版本为hadoop2.2.0, 旧的版本和此版本的解决方法不同) 异常为: 9 (storage id DS-2102177634-172.16.102.203-50010-1384 ...

  7. WordPress OptimizePress插件任意文件上传漏洞

    漏洞版本: WordPress OptimizePress Plugin 1.x 漏洞描述: WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设 ...

  8. jQuery on()方法绑定动态元素的点击事件

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  9. wpa_supplicant 与iwpriv工具配置WIFI的命令

    =====================================================hostapd 配置命令=================================== ...

  10. 事件流处理框架NEsper for .NET z

    复合事件处理(Complex Event Processing)介绍提到了开源的Esper,NEsper 是一个事件流处理(Event Stream Processing,ESP)和复杂事件处理(Co ...