handlebars的使用

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

最新文章

热门文章