web 开发中,js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版,只要你定义一个模版,提供一个json对象,handlebars 就能吧json对象放到你定的模版中,非常方便好用! 下面直接上代码:
- <!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>
- $(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));;
- }