Javascript模板引擎handlebars使用实例及技巧 - 面向对象网,web开发,脚本,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > 脚本语言 > 正文

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

来源: www.bianceng.cn 阅读:

我们在开发的时候针对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: "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出来

<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>

Tags:
相关文章列表: