10分でHandlebarsを学ぶ

先端開発whqet,csdn,王海慶,whqet,先端開発専門家
原文:Learn Handlebars in 10 Minutes or Less
翻訳:フロントエンドでwhqetを開発し、意訳を主とし、不適切な点を指摘してください.
著者紹介:Danny Markov、Tutorialzineのbootstrapとhtml 5の専門家で、余暇は自転車に乗るか公園のある角度コードが好きです.
handlebarsは流行のテンプレートエンジンで、javascriptからhtmlを分離し、より明確なコードを書くことができるという.やってみてもいいです.
----------------------------------------------------------------------------------------------------------------------------------------
華やかな区切り線の後、本題に戻ります!
----------------------------------------------------------------------------------------------------------------------------------------
Handlebars.jsは非常に流行している機能の強いテンプレートエンジンで、簡単で使いやすく、良い学習コミュニティを備えています.Mustacheテンプレートエンジンに基づいて、多くの改良が行われています.Handlebarsを使用すると、javascriptコードからhtmlを簡単に分離し、より明確なコードを書くことができます.
この文章は10分ぐらいの時間で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、通常のテキスト、式を使用することができます.式は通常、2対または3対のカッコに含まれ、変数や機能関数を含むことができます.テンプレートはコンパイルしてから使用する必要があります.次のコードに示すように、ケースは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では、3つのカッコ{{}}}を使用します.
また、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を作成します.異なるのは、第2のパラメータ、コールバック関数を使用する必要があります.次のコードを見て、強力な機能を体得します.

<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フロントエンドの開発に注目して、関連資源を分かち合って、いいねを歓迎して、レンガを撮ることを歓迎します.
---------------------------------------------------------------------------------------------------------