模版引擎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: "[email protected]" },
          {username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" },
          {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
        ]};
      $("#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));;

}