10分鐘快速學Handlebars，10分鐘handlebars

10分鐘快速學Handlebars，10分鐘handlebars
前端開發whqet,csdn,王海慶,whqet,前端開發專家

原文：Learn Handlebars in 10 Minutes or Less

翻譯：前端開發whqet， 意譯為主，不當之處敬請指正。

作者簡介：Danny Markov ，Tutorialzine的bootstrap和html5方面的專家，業餘時間喜歡騎單車或在公園的某個角度碼碼。

譯者的話：據說handlebars是一個流行的模板引擎，可以把html從javascript中分離出來，寫更清晰的代碼。來不妨一試。

----------------------------------------------------------------------------------------------------------------------------------------

華麗的分隔線之後，言歸正傳！

----------------------------------------------------------------------------------------------------------------------------------------

Handlebars.js是一個非常流行的功能強大的模板引擎，簡單易用，具備較好的學習社區。它基於 Mustache 模板引擎，並且做了諸多改進。利用Handlebars您可以方便的把html從javascript代碼中分離出來，從而書寫更清晰的代碼。

本文章試圖通過十分鐘左右的時間帶您領略Handlebars的風采，剛開始學的時候可能費點周折，但是您一旦上手，一切將變得很簡單。

0.引入項目

在項目中引入Handlebars非常簡單，到 http://handlebarsjs.com/下載最新版本（本文寫作時，最新版為2.0.0），然後使用script標籤引入即可。當然您也可以使用cdn的方式，享受cdn方式的暢快。如代碼所示。

// From File<script src="handlebars-v2.0.0.js"></script>// From CDN<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

1.Templates

當您引入庫之後，我們可以愉快的書寫模板了，推薦的方式是通過特殊type的script標籤來添加模板，type屬性是非常重要的，否則瀏覽器會將它們看做javascrip解析。

模板具有一個很容易理解的文法，可以使用html、普通文本和運算式，運算式通常被包含在兩對或三對花括弧裡，可以包含變數或功能函數。模板需要編譯之後才能使用，如下面代碼所示，案例我放在了codepen，大家不妨一看。。注意一點，我們使用了jquery僅僅為了方便dom操作，handlebars可以脫離jquery良好工作。

<!--模板. --><!--需要資料的地方，用{{}}括起來.--><script id="address-template" type="text/x-handlebars-template">  <p>You can find me in {{city}}. My address is {{number}} {{street}}.</p></script><!--新的內容在這裡展示--><div class="content-placeholder"></div>

$(function () {  // 抓模數板資料  var theTemplateScript = $("#address-template").html();  // 編譯模板  var theTemplate = Handlebars.compile(theTemplateScript);  // 定義資料  var context={    "city": "London",    "street": "Baker Street",    "number": "221B"  };  // 把資料傳送到模板  var theCompiledHtml = theTemplate(context);  // 更新到模板  $('.content-placeholder').html(theCompiledHtml);});

2. Expressions

上面所示的案例，運算式中的任何html代碼將會被自動忽略，這是一個非常實用的效能，但是有的時候我們需要解析html，那麼就要用三個花括弧{{{ }}}，如下面代碼所示，示範效果在codepen。

另外，handlebars運算式允許嵌套值，可以方便我們訪問javascript對象的任何值。

<script id="expressions-template" type="text/x-handlebars-template">  {{description.escaped}}  {{example}}  <br><br>  {{description.unescaped}}  {{{example}}}</script><div class="content-placeholder"></div>

$(function () {  // 抓模數板資料  var theTemplateScript = $("#expressions-template").html();  // 編譯模板  var theTemplate = Handlebars.compile(theTemplateScript);  // 定義資料  var context={    "description": {      "escaped": "Using {{}} brackets will result in escaped HTML:",      "unescaped": "Using {{{}}} will leave the context as it is:"    },    "example": "<button> Hello </button>"  };  // 傳送資料  var theCompiledHtml = theTemplate(context);  // 展示到頁面  $('.content-placeholder').html(theCompiledHtml);});

3. Context

Handlebars利用了Mustache的強大特性，context就是其中之一。我們可以把需要傳遞的資料放在這個javascript對象中，使用#each、#with等方法可以方便的使用該對象的資料。看了下面這個案例，那就明白了，示範效果在codepen。

<!-- #each可以遍曆資料. --><script id="example-template" type="text/x-handlebars-template">  <!-- 遍曆people -->  {{#each people}}    <!-- 直接使用每個people的資料 -->    <p>{{firstName}} {{lastName}}</p>  {{/each}}</script>

$(function () {  var theTemplateScript = $("#example-template").html();  var theTemplate = Handlebars.compile(theTemplateScript);  var context = {    people: [       { firstName: 'Homer', lastName: 'Simpson' },      { firstName: 'Peter', lastName: 'Griffin' },      { firstName: 'Eric', lastName: 'Cartman' },      { firstName: 'Kenny', lastName: 'McCormick' },      { firstName: 'Bart', lastName: 'Simpson' }    ]  };  var theCompiledHtml = theTemplate(context);  $(document.body).append(theCompiledHtml);});

4. Helpers

Handlebars不允許在模板中使用javascript，而是提供了一些列的功能函數(helpers)，可以在模板中調用，方便代碼重用和創造複雜模板。使用運算式調用helpers的格式類似如此，{{helpername}}，同時也可以傳遞參數，{{helpname 12345}}。

開發新的helper，使用registerHelper function，下面代碼示範了如何建立新的功能函數，如何使用內建的功能函數，示範檔案在codepen。

<script id="built-in-helpers-template" type="text/x-handlebars-template">  {{#each animals}}    <p>      The {{capitalize this.name}} says      {{#if this.noise}}        "{{this.noise}}".      {{else}}        nothing since its a {{this.name}}.      {{/if}}    </p>  {{/each}}</script><div class="content-placeholder"></div>

$(function () {  // 定義a helper  Handlebars.registerHelper('capitalize', function(str){    // str is the argument passed to the helper when called    str = str || '';    return str.slice(0,1).toUpperCase() + str.slice(1);  });  var theTemplateScript = $("#built-in-helpers-template").html();  var theTemplate = Handlebars.compile(theTemplateScript);  var context = {    animals:[      {        name: "cow",        noise: "moooo"      },      {        name: "cat",        noise: "meow"      },      {        name: "fish",        noise: ""      },      {        name: "farmer",        noise: "Get off my property!"      }    ]  };  var theCompiledHtml = theTemplate(context);  $('.content-placeholder').html(theCompiledHtml);});

5. Block helpers

Block helpers像普通的功能函數一樣，但是有開始和結束標籤(類似於內建的#if、#each等)，可以修改包含的html的內容。建立更為複雜一些，當時功能更加強大。經常使用它們重複使用功能、建立一大段可重用的html等。

同樣使用Handlebars.registerHelper()建立block helper，不同的是我們需要使用第二參數，回呼函數。看看下面的代碼，體會強大功能。

<script id="block-expressions-template" type="text/x-handlebars-template">  <p> The <b> {{#uppercase}} konami {{/uppercase}} </b> Code is a cheat code that appears in many video games.</p>  <p>During the title screen before the game demo begins, the player could press the following sequence of buttons on the game controller to enable the cheat:</p>  <p>{{#uppercase}}{{code}}{{/uppercase}}</p>  <p>The code is also present as an Easter egg on a number of websites.</p></script><div class="content-placeholder"></div>

$(function () {    var theTemplateScript = $("#block-expressions-template").html();  // This is our block helper  // The name of our helper is provided as the first parameter - in this case 'uppercase'  Handlebars.registerHelper('uppercase', function(options) {    // "this" is the context that existed when calling the helper.    // The options object has a special function - fn. This is a    // compiled version of the template that is contained between the opening and closing    // blocks of this helper. To get a string, call fn with the context:    return options.fn(this).toUpperCase();  });  var theTemplate = Handlebars.compile(theTemplateScript);  var context = {    "code": "up up down down left right left right b a select start"  };  var theCompiledHtml = theTemplate(context);  $('.content-placeholder').html(theCompiledHtml);});

6.資源和延伸閱讀

現在你基本上瞭解了handlebars的常用功能，同樣再多學點也問題不大，您可以通過以下資源深入學習。

Handlebars.js-官方網站，可以擷取更多案例、官方文檔

Try Handlebars.js-嘗試不同的應用情境(基於老版本)

Handlebars Helpers-handlebars helpers集

SWAG-更多

Handlebars API Reference -api文檔

----------------------------------------------------------

前端開發whqet，關注web前端開發，分享相關資源，歡迎點贊，歡迎拍磚。

---------------------------------------------------------------------------------------------------------