Javascript模板引擎handlebars使用实例及技巧

技术小胖子 2017-11-13

javascript js class test html type list email


004453140.png



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


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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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="script/jquery.js"></script>
    <script type="text/javascript" src="script/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: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },
            { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },
            { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },
            { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },
            { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }
          ]
        };
                                                                                                                                                                                                                                                                                                                                                                                                               
        $('#list').html(template(data));
      });
    </script>
  </body>
</html>



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


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

1
2
3
4
5
<script id="each-template" type="text/x-handlebars-template">
  {{#each people}}
    ... output person's info here...
  {{/each}}
</script>


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

1
2
3
4
5
<script id="each-template" type="text/x-handlebars-template">
  {{#if people}}
    ... output person's info here...
  {{/if}}
</script>


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

1
2
3
4
5
<script id="each-template" type="text/x-handlebars-template">
  {{#unless people.length}}
    There aren't any people.
  {{/unless}}
</script>


if else 关联的判断

1
2
3
4
5
6
7
<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>


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


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


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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="script/jquery.js"></script>
    <script type="text/javascript" src="script/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 = 0, 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: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },
            { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },
            { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },
            { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },
            { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }
          ]
        };
                                                                                                                                                                                              
        $('#list').html(template(data));
      });
    </script>
  </body>
</html>



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

080204196.jpg


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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="list">
    </div>
                                                                                                                   
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/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来搞。

1
2
3
4
5
6
$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
   //result 就是值
    });
  });
});


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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  强大,但是他的优点很明显,就是小数据的展现还是相当的容易的。





 本文转自 rfyiamcool 51CTO博客,原文链接:http://blog.51cto.com/rfyiamcool/1278620,如需转载请自行联系原作者


登录 后评论
下一篇
云栖号资讯小编
27819人浏览
2020-07-13
相关推荐
基于Node.js的模板引擎大比拼
933人浏览
2017-02-28 17:16:19
前端知识库
36586人浏览
2017-03-02 22:30:55
前端知识库
3506人浏览
2017-04-10 16:37:34
使用 Make 构建网站
1463人浏览
2016-06-07 16:38:00
推荐13款javascript模板引擎
675人浏览
2014-07-17 17:55:00
13 款 JavaScript 模板引擎
810人浏览
2012-04-15 10:12:00
字符串模板浅析
1770人浏览
2018-07-13 17:49:36
0
0
0
941