Handlebars 的使用
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));;}
页:
[1]