码迷,mamicode.com
首页 > 其他好文 > 详细

handlebars的使用

时间:2015-07-10 11:09:47      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:

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的使用

标签:

原文地址:http://www.cnblogs.com/zhuiluoyu/p/4635052.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!