`
jalja
  • 浏览: 6977 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论
  • g329741609： 有些公司看见这种什么达内啊的培训机构出来的学生就不给好脸色。
    求职经历

handlebars 的使用案例

    博客分类：
  • js
jsonJavaScript 
阅读更多
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));; 
     
} 
分享到：
集合的遍历
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics