Handlebars的使用方法文檔整理(Handlebars.js) - diligenceday－IT工程師數位筆記本

文章出處

Handlebars是一款很高效的模版引擎,提供語意化的模版語句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 無需學習新語法即可使用;

Handlebars.js和Mustache 的區別

目前版本為 2.0.0, 無壓縮的情況下目測是 3000行源代碼,約 200kb;

下面這個是基本的模版表達式,
其中 {{ 和 }} 之間為handlerbars的變量;

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

查看更多表達式的用法

把數據放到自己定義的 <script> 標簽中;

<script id="entry-template" type="text/x-handlebars-template">
  template content
</script>

編譯模版

使用 Handlebars.compile 進行編譯模版;

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

智能編譯模版(在移動端也能運行哦么么噠)

更多有關預編譯的鏈接(Precompilation)

生成html代碼

通過上面的模版和數據混合編譯后的結果:

var context = {title: "標題", body: "我是字符串!"}
var html    = template(context);

JS生成的結果如下:

<div class="entry">
  <h1>標題</h1>
  <div class="body">
   我是字符串!
  </div>
</div>

更多template選項

//代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div1"></div>
<script id="entry-template" type="text/x-handlebars-template">    
    <div class="entry">
      <h1>{{title}}</h1>
      <div class="body">
        {{body}}
      </div>
    </div>
</script>
<script>
    //JS代碼
    var source   = $("#entry-template").html();
    var template = Handlebars.compile(source);
    
    var context = {title: "標題", body: "我是字符串!"}
    var html    = template(context);
    document.getElementById("div1").innerHTML = html;
</script>

</body>
</html>

//模版的代碼和JS的代碼如防止HTML被轉義的方法;

{{ }}和 {{{}}}和區別就是, 如果你不希望變量里面的字符串被轉義就使用{{{ }}}對變量進行處理;

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

數據如下：

{
  title: "All about <p> Tags",
  body: "<p>This is a post about &lt;p&gt; tags</p>"
}

定義的Helper如下

Handlebars.registerHelper('link', function(text, url) {
      text = Handlebars.Utils.escapeExpression(text);
      url  = Handlebars.Utils.escapeExpression(url);
    
      var result = '<a href="' + url + '">' + text + '</a>';
    
      return new Handlebars.SafeString(result);
    });

渲染以后的結果如下：

<div class="entry">
  <h1>All About &lt;p&gt; Tags</h1>
  <div class="body">
    <p>This is a post about &lt;p&gt; tags</p>
  </div>
</div>

//代碼如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div2"></div>

<script id="entry-template1" type="text/x-handlebars-template">    
    <div class="entry">
      <h1>{{title}}</h1>
      <div class="body">
        {{{body}}}
      </div>
    </div>
</script>

<script>
    Handlebars.registerHelper('link', function(text, url) {
      text = Handlebars.Utils.escapeExpression(text);
      url  = Handlebars.Utils.escapeExpression(url);
    
      var result = '<a href="' + url + '">' + text + '</a>';
    
      return new Handlebars.SafeString(result);
    });
    var source   = $("#entry-template1").html();
    var template = Handlebars.compile(source);
    var context = {
      title: "All about <p> Tags",
      body: "<p>This is a post about &lt;p&gt; tags</p>"
    };
    var html    = template(context);
    document.getElementById("div2").innerHTML = html;
</script>
</body>
</html>

Handlerbars的自定義表達式

塊表達式允許你定義 helpers 生成自定義的HTML,下面這個是JS的模版;

{{#list people}}{{firstName}} {{lastName}}{{/list}}

如果你使用下面的數據:

{
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

在JS里面定義這個helper;

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";

  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li> " ;       /*options.fn相當于一個編譯的函數*/
  }  

  return out + "</ul>";
});

執行以后的結果是:

<ul>
  <li>Yehuda Katz</li>
  <li>Carl Lerche</li>
  <li>Alan Johnson</li>
</ul>

自定義塊表達式還有很多別的特性, 比如可以直接使用 IF 和 ELSE；

Learn More: Block Helpers

//代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>


<div id="div3"></div>
<script id="entry-template2" type="text/x-handlebars-template">    
    {{! 這個是模版的注釋 }}
    {{#list people}}{{firstName}} {{lastName}}{{/list}}
</script>
<script>
    Handlebars.registerHelper('list', function(items, options) {
      var out = "<ul>";
    
      for(var i=0, l=items.length; i<l; i++) {
        out = out + "<li>" + options.fn(items[i]) + "</li> " ;       /*options.fn相當于一個編譯的函數*/
      }  
    
      return out + "</ul>";
    });
    
    var source   = $("#entry-template2").html();
    var template = Handlebars.compile(source);
    var context = {
      people: [
        {firstName: "Yehuda", lastName: "Katz"},
        {firstName: "Carl", lastName: "Lerche"},
        {firstName: "Alan", lastName: "Johnson"}
      ]
    };
    var html    = template(context);
    document.getElementById("div3").innerHTML = html;
</script>


</body>
</html>

Handlebars次級數據的渲染

Handlebars支持簡單的下級對象獲取和上級對象獲取, 跟 Mustache一樣樣的.

<p>{{name}}</p>

Handlebars 也支持多層次的數據展示, 模版如下.

<div class="entry">
  <h1>{{title}}</h1>
  <h2>By {{author.name}}</h2>

  <div class="body">
    {{body}}
  </div>
</div>

下面這個是要使用到的Handlebars的數據;

var context = {
  title: "My First Blog Post!",
  author: {
    id: 47,
    name: "Yehuda Katz"
  },
  body: "My first post. Wheeeee!"
};

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>


<div id="div4">
</div>
<script id="entry-template3" type="text/x-handlebars-template">    
    <div class="entry">
      <h1>{{title}}</h1>
      <h2>By {{author.name}}</h2>
    
      <div class="body">
        {{body}}
      </div>
    </div>
</script>
<script>
    var source   = $("#entry-template3").html();
    var template = Handlebars.compile(source);
    var context = {
      title: "My First Blog Post!",
      author: {
        id: 47,
        name: "Yehuda Katz"
      },
      body: "My first post. Wheeeee!"
    };
    var html    = template(context);
    document.getElementById("div4").innerHTML = html;
</script>


</body>
</html>

Handlebars 可以迭代Object對象(純對象或者數組); 在模版中的../是對象的父級;

<h1>Comments</h1>

<div id="comments">
  {{#each comments}}
  <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
  <div>{{body}}</div>
  {{/each}}
</div>

下面展示的name都是同樣的東西;

<p>{{./name}} or {{this/name}} or {{this.name}}</p>

Handlebars模版中的注釋可以使用 `{{!-- --}}` 或者 `{{! }}`或者 .

可以把模版專用的注釋寫在模版文件里面么么噠. 提高代碼的可讀性, 這個也算是最佳實踐吧;

<div class="entry">
  {{!-- only output this author names if an author exists --}}
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{/if}}
</div>

{{!-- --}}和{{! }}的注釋不會出現在生成的代碼中; 如果使用  注釋的代碼會出現在生成的代碼中;

<div class="entry">
  {{! This comment will not be in the output }}
  <!-- This comment will be in the output -->
</div>

自定義標簽(Helpers)

Handlebars的自定義標簽可以使用在Handlebars模版的任何地方,必須使用 Handlebars.registerHelper注冊到即可; 上代碼:

<div class="post">
  <h1>By {{fullName author}}</h1>
  <div class="body">{{body}}</div>

  <h1>Comments</h1>

  {{#each comments}}
  <h2>By {{fullName author}}</h2>
  <div class="body">{{body}}</div>
  {{/each}}
</div>

這個是要用到的data

var context = {
  author: {firstName: "Alan", lastName: "Johnson"},
  body: "I Love Handlebars",
  comments: [{
    author: {firstName: "Yehuda", lastName: "Katz"},
    body: "Me too!"
  }]
};

//就是下面這個helper提供了模版中的自定義標簽;
Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

生成的結果如下:

<div class="post">
  <h1>By Alan Johnson</h1>
  <div class="body">I Love Handlebars</div>

  <h1>Comments</h1>

  <h2>By Yehuda Katz</h2>
  <div class="body">Me Too!</div>
</div>

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>


<div id="div5"></div>
<script id="entry-template5" type="text/x-handlebars-template">    
    <div class="post">
      <h1>By {{fullName author}}</h1>
      <div class="body">{{body}}</div>
    
      <h1>Comments</h1>
    
      {{#each comments}}
      <h2>By {{fullName author}}</h2>
      <div class="body">{{body}}</div>
      {{/each}}
    </div>
</script>
<script>
    var context = {
      author: {firstName: "Alan", lastName: "Johnson"},
      body: "I Love Handlebars",
      comments: [{
        author: {firstName: "Yehuda", lastName: "Katz"},
        body: "Me too!"
      }]
    };
    
    //就是下面這個helper提供了模版中的自定義標簽;
    Handlebars.registerHelper('fullName', function(person) {
      return person.firstName + " " + person.lastName;
    });
    
    var source   = $("#entry-template5").html();
    var template = Handlebars.compile(source);
    var html    = template(context);
    document.getElementById("div5").innerHTML = html;
</script>


</body>
</html>

在自定義標簽的Helper可以使用this, this是當前的對象;

<ul>
  {{#each items}}
  <li>{{agree_button}}</li>
  {{/each}}
</ul>

這個是填充的數據和定義的Helpers:

var context = {
  items: [
    {name: "Handlebars", emotion: "love"},
    {name: "Mustache", emotion: "enjoy"},
    {name: "Ember", emotion: "want to learn"}
  ]
};

Handlebars.registerHelper('agree_button', function() {
  var emotion = Handlebars.escapeExpression(this.emotion),
      name = Handlebars.escapeExpression(this.name);

  return new Handlebars.SafeString(
    "<button>I agree. I " + emotion + " " + name + "</button>"
  );
});

生成的結果如下:

<ul>
  <li><button>I agree. I love Handlebars</button></li>
  <li><button>I agree. I enjoy Mustache</button></li>
  <li><button>I agree. I want to learn Ember</button></li>
</ul>

如果你希望你返回的HTML代碼不被轉義, 就要在定義的Helper中返回 new Handlebars.SafeString;
return new Handlebars.SafeString(代碼)

自定義標簽(Helpers)的更多信息;

Handlebars 提供 if 在模版中進行簡單的邏輯處理; 以及迭代處理的標簽 each .

自定義helper的更多信息

//例子代碼段:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>



<div id="div6"></div>
<script id="entry-template6" type="text/x-handlebars-template">    
    {{#list people}}{{firstName}} {{lastName}}{{/list}}
</script>
<script>
    var context = {
      people: [
        {firstName: "Yehuda", lastName: "Katz"},
        {firstName: "Carl", lastName: "Lerche"},
        {firstName: "Alan", lastName: "Johnson"}
      ]
    };
    Handlebars.registerHelper('list', function(items, options) {
      var out = "<ul>";
    
      for(var i=0, l=items.length; i<l; i++) {
        out = out + "<li>" + options.fn(items[i]) + "</li>";
      }
    
      return out + "</ul>";
    });
    
    
    var source   = $("#entry-template6").html();
    var template = Handlebars.compile(source);
    var html    = template(context);
    document.getElementById("div6").innerHTML = html;
</script>



</body>
</html>

//handlebars的IF ELSE語句和 each語句的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.madebyglutard.com/libs/handlebars.js/2.0.0/handlebars.js"></script>

<div id="div7"></div>
<script id="entry-template7" type="text/x-handlebars-template">    
    {{#if haveIf}}我有If{{else}}我沒有If{{/if}};
    
    {{#each arr}}
        <p>{{this.a}} &gt; &gt; <span>this.data</span></p> 
    {{/each}}
    
    {{!迭代這條對象}}
    {{#each test}}
            {{!如果滿足條件就打印第一個模版， 如果不滿足條件就打印第二個模版, helper做的只是對數據進行判斷而已}}    
        {{#inverse}}
            <p>{{this.direct}}</p>
        {{else}}
            <p>inverse:{{this.inverse}}</p>
        {{/inverse}}
    {{/each}}
</script>
<script>
    var context = {
        haveIf : true,
        arr : [
            { a : "a" , data : "___a"},
            { a : "b" , data : "___b"},
            { a : "c" , data : "___c"}
        ],
        test : [
            {
                condition : true,
                direct : "打印dir"
            },
            {
                condition : false,
                direct : "dir",
                inverse : "打印inverse"
            }
        ]
    };
    Handlebars.registerHelper('inverse', function(options) {
        if( this.condition ) {
            return options.fn(this);
        }else{
            return options.inverse(this);
        }
    });
    var source   = $("#entry-template7").html();
    var template = Handlebars.compile(source);
    var html    = template(context);
    document.getElementById("div7").innerHTML = html;
</script>
</body>
</html>

更多handlebars的API查看

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds