模版引擎Handlebars和Mustache

Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用;

下面这个是基本的模版表达式,

其中 {{ 和 }} 之间为handlerbars的变量;

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

拓展：Handlebars 的使用

其实就是模板化，这是以前就开始推崇的面向数据编程的一个方式。比如jquery template

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));;  
      
}

posted @ 2019-10-19 11:50 剑仙6 阅读(687) 评论(0) 编辑收藏举报

刷新页面返回顶部

剑仙6

模版引擎Handlebars和Mustache

公告