（使用可能なページの小さな光工学）handlebar.jsテンプレートエンジン

入門

Handlebarsだから、簡単かつ効率的に作成されたセマンティックテンプレートへの能力を持つことができます。Handlebars互換性のあるMustacheほとんどのケースで読み取ることができ、構文、Mustacheあなたの現在のテンプレートでの構文と使用を。具体的にクリックしてここに

インストール

ダウンロード
npm install --save handlebars
bower install --save handlebars

具体的な言及

開始

Handlebarsテンプレートは、入れ子になったように見えるhandlebarsHTML発現仕様。

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

handlebars式：{{ cnt }}
あなたがまたできる<script>小包ラベルhandlebarsのブラウザに配信テンプレート式を：

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

あなたは上のテンプレートを配置する必要があり <script> 、非常に重要であるタグ。HTMLまたはHTML構文解析に直接置かないでくださいテンプレートの内容は変更されます。

でJavaScript使用してHandlebars.compileテンプレートをコンパイルします：

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
// ‘entry-template’就是包裹模板的script的id

この方法は、製品の用途での使用は推奨されていないことに注意してください。より良いアプローチは、プリコンパイルテンプレートです。これは、大幅な時間の節約をコンパイルすることなく、ブラウザに必要なランタイム小さいテンプレートを行います。これは、モバイルデバイス上で特に重要です。

等:(これは、ルールのセットである）プリコンパイルされたテンプレートのJavaScriptで、使用Handlebars.compile（）メソッド

//用jquery获取模板
var tpl   =  $("#tpl").html();
//原生方法
var source = document.getElementById('#tpl').innerHTML;
//预编译模板
var template = Handlebars.compile(source);
//模拟json数据
var context = { name: "zhaoshuai", content: "learn Handlebars"};
//匹配json内容
var html = template(context);
//输入模板
$(body).html(html);

解析することでcontext、プロセスをhandlebars模板取得しますHTML内容：

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

HTMLを出力：

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

HTMLトランスコーディング

HandlebarsトランスコーディングHTML値が{{expression}}返された。あなたが値をトランスコードハンドルバーにはしたくない場合は、使用を{{{expression}}}

<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>"
}

出力：

<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>

Handlebarsそれは逃れられないだろうHandlebars.SafeString。あなたはHTML自体が補助出力が含まれている記述する場合helper、あなたが実際に新しいものを返すようにしたいHandlebars.SafeString。この場合は、手動でスプライスパラメータにしたいです。

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

あなたが適用されない場合でも、これは、文字列は、正しい応答パラメータをトランスコードさ回避{{{トランスコードされることはありません。

ブロック・レベルの発現

ブロック・レベルの発現は、コンテンツテンプレートを対応するヘルパー置き換えるために別のコンテキストを引き起こすことができる電流を定義することができます。これらのブロックレベルは、プラスの名前の前にヘルパーヘルパーによって支援#終わりにプラス旧名/：

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

コンテキストをレンダリング：

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

私たちは、名前の作成するlistヘルパー出力HTMLリストを。リストはpeople最初の引数、2番目のパラメータとしてハッシュオプションです。これらのオプションは、ハンドルバーテンプレートに名前でこれらのプロパティの値を取得し、FNというプロパティが含まれています

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

レンダリング結果：

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

ブロックレベルの二次ヘルパーは、たとえば、あなたが作成することができ、多くの機能を持っているelse部分を。あなたが呼び出したときなのでoptions.fn(context)、ブロックレベルのヘルパーの内容に既にトランスコードされていたハンドルバーコードヘルパーの内容を回すので、行くことはありません。

ハンドラのパス

Handlebarsそれはのような単純なパスをサポートしていますMustache。

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

ハンドルはまた、そのようなオブジェクトのプロパティとして、ネストされたプロパティをサポートしています。

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

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

オブジェクトは、作業コンテキストをテンプレート：

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

これは、使用可能handlebarsテンプレート処理JSONの可能な文字列を。埋め込まれたパスハンドルはまた、../現在のパスの親と同等の文法を、。

<h1>Comments</h1>

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

{{permalink}}
{{#each comments}}
  {{../permalink}}

  {{#if title}}
    {{../permalink}}
  {{/if}}
{{/each}}

例としては、ここに引用した同じであるpermalink彼らは異なるブロックにある場合でも。この動作は、新しい、handlebars4サポートです。

ハンドル式に構築ブロック（ブロックヘルパー）

各ブロックのヘルパー
あなたはビルトインで使用できる{{#each}}次のような要素を横断するために参照するためにこれを使用、ヘルパーブロックコンテンツリストを
```
   <ul>  
       {{#each name}}
           <li>{{this}}</li>
       {{/each}}
   </ul>  
```
該当JSONのデータ
```
   {
       name: ["html","css","javascript"]
   };
```
アレイであり、それぞれが等しく、より複雑なデータを用いてアレイを横断するように構築され、ここでこれは配列ここで、各要素、ブロックなど、上記のことをいうが、原理は、ここでは同じ名前ではありません適用されます。
elseブロックヘルパーがあれば
{{#if}}、あなたが同じJavaScriptを使用しますが、あなたは条件がDOMは、その引数を返した場合、レンダリングを指定することができfalse，undefined, null, "" 或者 [] (a "falsy" value)、存在する場合、ハンドルバーは、DOMをレンダリングしません{{#else}}が実行され{{#else}}、後にレンダリングします。
```
   {{#if list}}
   <ul id="list">  
       {{#each list}}
           <li>{{this}}</li>
       {{/each}}
   </ul>  
   {{else}}
       <p>{{error}}</p>
   {{/if}}
```
該当JSONのデータ
```
var data = {info:['HTML5','CSS3',"WebGL"],"error":"数据取出错误"}
```
ここで{{#if}}エラーメッセージが存在しない場合、本トラバースリスト場合は、配列リストが存在するか否かを判定する出力されます

ブロックヘルパーザ・しない限り、
{} {}決意がfalseの場合、構文は、ある場合には、この構文を反転させ#unless、例えば、彼はDOMをレンダリングします：

   {{#unless data}}
   <ul id="list">  
       {{#each list}}
           <li>{{this}}</li>
       {{/each}}
   </ul>  
   {{else}}
       <p>{{error}}</p>
   {{/unless}}

ブロックヘルパー
一般に{{}} #withは、ハンドルバーテンプレートは、コンパイル時の段階におけるコンテキスト転送と割り当てであろう。（あなたのデータはセクションが含まれている場合）で使用することは、我々はデータのコンテキスト内のセクションに転送することができます。この方法は、テンプレート複雑な操作に有用です。
```
   <div class="entry">  
     <h1>{{title}}</h1>
     {{#with author}}
     <h2>By {{firstName}} {{lastName}}</h2>
     {{/with}}
   </div>  
```
該当JSONのデータ
```
   {
     title: "My first post!",
     author: {
       firstName: "Charles",
       lastName: "Jolley"
     }
   }
```

ハンドルコメント（コメント）

次のようにコメントを書かれたハンドルバーを使用することができます

{{! handlebars comments }}

ハンドルバーへのアクセス（パス）

カイゼルひげとサポートパス、パスハンドルがサポートには、ネストされたことで、現在のコンテキストの属性を見つけることができます下にネスト
することができます。../アクセス属性は、親属性にアクセスするために使用することができること。例えばアクセス:(使用。例）

<h1>{{author.id}}</h1>

JSONに対応したデータ

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

例えば:(使用../アクセス）

{{#with person}}
    <h1>{{../company.name}}</h1>
{{/with}}

該当JSONのデータ

{
    "person":
    { "name": "Alan" },
        company:
    {"name": "Rad, Inc." }
};

カスタムヘルパー

ハンドルバーは、あなたがヘルパーHandlebars.registerHelper（）メソッドを登録するために使用できるテンプレートで任意のコンテキストからアクセスすることができます。

トラブルシューティングのヒント

次の段落「デバッグヘルパーは」JavaScriptコードにロードされ、その後、{{デバッグ}}または{{デバッグsomeValueの}}簡単にデバッグデータによるテンプレート・ファイル内の

Handlebars.registerHelper("debug", function(optionalValue) {  
  console.log("Current Context");
  console.log("====================");
  console.log(this);
  if (optionalValue) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

jQueryのプラグインのハンドルバー

(function($) {
    var compiled = {};
    $.fn.handlebars = function(template, data) {
        if (template instanceof jQuery) {
            template = $(template).html();
        }
    compiled[template] = Handlebars.compile(template);
    this.html(compiled[template](data));
    };
})(jQuery);
$('#content').handlebars($('#template'), { name: "Alan" });

入門