今日、Webの大部分は、データが頻繁に変化し続ける動的なアプリケーションで構成されています。その結果、ブラウザでレンダリングされたデータを更新する必要があります。これは、JavaScriptテンプレートエンジンが救助に来て、とても便利になる場所です。ビューを手動で更新するプロセスを簡素化し、同時に、開発者がビジネスロジックを残りのコードから分離できるようにすることで、アプリケーションの構造を改善します。最もよく知られているJavaScriptテンプレートエンジンのいくつかは、口ひげ、アンダースコア、EJS、ハンドルバーです。この記事では、その主な機能について議論することにより、ハンドルバーに注意を向けます。
キーテイクアウトember.js、meteor.js、derby.js、ghostなどの人気のあるフレームワークやプラットフォームで使用されています
この短い要約が、ハンドルバーを使用する価値があるかどうかを決定するのに役立つことを願っています。
ハンドルバーは変数を使用してテンプレートを取り、それを関数にコンパイルします
テンプレートは、HTMLファイルまたは個別に記述できます。最初のケースでは、type = "text/x handlebars-template"属性とIDで<script>タグ内に表示されます。変数は、二重巻き毛の装具{{{}}で記述され、式として知られています。例は次のとおりです。<h2 > <p> このマークアップを所定の位置に配置すると、それを使用しなければならないことがわかります。 JavaScriptファイルでは、最初にHTMLドキュメントからテンプレートを取得する必要があります。次の例では、この目的のためにテンプレートのIDを使用します。テンプレートが取得された後、関数を返すHandleBars.compile（）メソッドを使用してコンパイルできます。この関数は、コンテキストを引数として渡すことにより実行されます。実行が完了すると、関数は、対応する値に置き換えられたすべての変数を使用して目的のHTMLを返します。この時点で、HTMLをWebページに挿入できます。 <p>この説明をコードにすると、次のスニペットが得られます。 <pre ><span ><span ><span ><script src<span >="/path/to/handlebars.min.js"><span ><span ></script>
このコードのライブデモは、このCodepenデモにあります
構文
今度は、ハンドルバーに少し深く入り込む時が来ました。ハンドルバーのコアを形成するいくつかの重要な用語と構文を実行します。 式
上記のセクションで既に式を見ました。テンプレート内で使用される変数は、二重巻き毛装具{{{}}に囲まれており、式として知られています。
htmlエスケープ
ハンドルバーは、式によって返される値を逃れることができます。たとえば、文字<は＆ltに変換されます。ハンドルバーに値を逃がしたくない場合は、トリプルカーリーブレース{{{variablename}}}を使用して変数を囲む必要があります。たとえば、次のテンプレートの場合：
は、以下に報告されたコンテキスト変数で使用されます：
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
結果のHTMLは次のとおりです
My name is {{name}}
この機能を示すライブデモは、このcodepenデモにあります。
コメント
ハンドルバーのテンプレート内にコメントを書くこともできます。ハンドルバーのコメントの構文は{{！typeyourcommenthere}}です。ただし、ハンドルバーに特別な意味を持つその他のシンボルにあるすべてのコメントは、{{！ - typeyourcommenthere--}}で書かれている必要があります。ハンドルバーのコメントはHTMLには表示されませんが、表示したい場合は、標準のHTMLコメントを使用できます。
これらすべての概念を使用しているテンプレートに適用すると、以下に示すコードを作成できます。
以下に報告されたコンテキスト変数で前のテンプレートを使用した場合：
HTML出力は次のとおりです
これにより、ブラウザが標準のHTMLコメント内にコンテンツが表示されないようになります。この例のデモは、こちらにあります。
ブロック
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
ハンドルバーでは、ブロックはブロック開口部（{{{＃}}）と閉じ（{{/}}）を持つ式です。ヘルパーに焦点を当てながら、このトピックを後で詳細に勉強します。とりあえず、IFブロックがどのように書かれているかを見てください：
パス
ハンドルバーは、通常のパスとネストされたパスの両方をサポートしているため、現在のコンテキストの下にネストされたプロパティを調べることができます。ハンドルバーも../パスセグメントをサポートしています。このセグメントは、親テンプレートの範囲を参照し、コンテキストでレベルアップするものではありません。
このトピックをよりよく理解するために、以下の例を使用して、各ヘルパーを使用します（後で詳細に説明します）。ご想像のとおり、後者は配列のアイテムを繰り返します。
この例では、次のテンプレートを使用します
My name is {{name}}
このコンテキスト変数を提供することにより、
以下に示す出力を取得します：
I am learning {{language}}. It is {{{adjective}}}.
これまでに作成した他の小さなスニペットのように、この例はCodepenで入手できます。
ヘルパー
var context = {"language" : "Handlebars
","adjective": "awesome
"}ハンドルバーは論理のないテンプレートエンジンですが、ヘルパーを使用して簡単なロジックを実行できます。ハンドルバーヘルパーは、以下に示すように、パラメーター（スペースで区切られている）が続く可能性のある単純な識別子です。
各パラメーターはハンドルバー式です。これらのヘルパーは、テンプレート内の任意のコンテキストからアクセスできます。
「ブロック」、「ヘルパー」、「ブロックヘルパー」という用語は、ブロックヘルパーとは少し異なる機能ヘルパーがありますが、ビルトインヘルパーのほとんどがブロックであるため、交換可能に使用される場合があります。カスタムヘルパーをカバーしながら説明します
I am learning Handlebars
. It is awesome
組み込みのヘルパーは、それぞれ、それぞれ、そして詳細を学びましょう。各ヘルパー
各ヘルパーは、配列を反復するために使用されます。ヘルパーの構文は{{#each arrayname}} yourcontent {{/exly}}です。ブロック内でこのキーワードを使用して、個々の配列アイテムを参照できます。 {{@index}}を使用して、配列の要素のインデックスをレンダリングできます。以下の例は、各ヘルパーの使用を示しています。
次のテンプレートを使用している場合：
このコンテキスト変数と組み合わせて
出力は次のとおりです
この例のライブデモは、codepenで見つけることができます。
ヘルパーの場合
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
IFヘルパーはIFステートメントに似ています。条件が truthy
値に評価された場合、ハンドルバーはブロックをレンダリングします。 {{else}}を使用して、「else section」と呼ばれるテンプレートセクションを指定することもできます。ヘルパーがIFヘルパーの逆でない限り。条件がAfalsy
値に評価されると、ブロックをレンダリングします。
ヘルパーがどのように機能するかを示すには、以下のテンプレートを考えてみましょう。
次のコンテキスト変数を提供している場合：
My name is {{name}}以下に報告された結果を取得します：
I am learning {{language}}. It is {{{adjective}}}.これは、空の配列が falsy値であるために起こります。
ヘルパーで遊びたい場合は、Codepenで作成したライブデモをご覧ください。
カスタムヘルパー
var context = {"language" : "Handlebars
","adjective": "awesome
"}
ハンドルバーが提供する式システムを使用して複雑なロジックを実行する独自のヘルパーを作成できます。ヘルパーには、機能ヘルパーとブロックヘルパーの2種類があります。最初の定義は単一の式であり、後者はブロック式に使用されます。コールバック関数に提供される引数は、ヘルパーの名前の後に書かれたパラメーターで、スペースで区切られています。ヘルパーは、handlebars.registerhelper（）メソッドを使用して作成されます
カスタム関数ヘルパー
関数ヘルパーの構文は{{helpername parameter1 parameter2 ...}}です。実装を続行する方法をよりよく理解するために、StudyStatusと呼ばれる関数ヘルパーを作成しましょう。
この例では、パラメーターは1つだけです。ただし、ヘルパーのコールバック関数にさらにパラメーターを渡す場合は、スペースで区切られた最初のパラメーターの後にテンプレートに記述できます。
このテンプレートを使用して例を作成しましょう：
I am learning Handlebars
. It is awesome
および次のコンテキスト変数を使用してください：
I am learning {{language}}. It is {{!--adjective--}}この場合、出力は次のとおりです
この例のライブデモはこちらから入手できます。
カスタムブロックヘルパー
var context = {"language" : "Handlebars","adjective": "awesome"}カスタムブロックヘルパーは、関数ヘルパーと同じ方法で使用されますが、構文は少し異なります。ブロックヘルパーの構文は次のとおりです
カスタムブロックヘルパーを登録すると、ハンドルバーはコールバック関数に最後のパラメーターとしてオプションオブジェクトを自動的に追加します。このオプションオブジェクトには、特定のプロパティにアクセスするために一時的にオブジェクトのコンテキストを変更できるFN（）メソッドがあります。 StudyStatusという名前のブロックヘルパーを使用して、前のセクションの例を変更しましょう。
このコードが以下に定義されているテンプレートと併用している場合
次の結果を取得します：
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
そして、ここにCodepenデモがあります。
My name is {{name}}
部分テンプレート
ハンドルバーの部分的なものは、異なるテンプレート間で共有できるテンプレートです。それらは{{> partialName}}と書かれています。 HTMLでそれらを使用する前に、handlebars.registerPartial（）メソッドを使用して部分的な部分を登録する必要があります。次の例では、部分的な名前のpartialtemplateを登録する方法を理解するのに役立ちます：
以下で定義されたテンプレートで使用した場合
I am learning {{language}}. It is {{{adjective}}}.
次の結果が得られます：
var context = {"language" : "Handlebars
","adjective": "awesome
"}
このコードのライブデモは、このCodepenデモにあります。
precompilation
I am learning Handlebars
. It is awesome
私たちが見たように、ハンドルバーが最初に行うことは、テンプレートを関数にコンパイルすることです。これは、クライアントで実行するのに最も高価な操作の1つです。 TemplateScriptを事前に縮小し、コンパイルされたバージョンをクライアントに送信すると、アプリケーションのパフォーマンスを改善できます。その場合、クライアントで実行する必要がある唯一のタスクは、その関数の実行です。事前コンパイルされたファイルはスクリプトであるため、HTMLのスクリプトを通常のファイルとしてロードできます。これらすべてのことがどのように行われるか見てみましょう。
まず、NPMインストールハンドルバー-gを使用して、ハンドルバーをグローバルにインストールする必要があります。さまざまなテンプレートが、異なるファイル名と.handlebars拡張機能（Demo.handlebarsなど）を持つ個別のファイルに記述されていることを確認してください。それらのファイル内で<script>タグを使用する必要はありません。
<p>
<p>すべてのテンプレートファイルをテンプレートという名前の単一のフォルダーに保存します。任意のフォルダー名を使用することはできますが、それを行う場合は、それに応じて次のコマンドを変更することを忘れないでください。したがって、端子を開き、コマンドを実行します：
<p> <pre ><span ><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}
このコマンドは、すべてのコンパイルされたテンプレートを含むTemplatesCompiled.jsという名前のファイルを生成します。コンパイラは、ハンドルバーにテンプレートを挿入します。テンプレート。入力ファイルがdemo.handlebarsの場合、handlebars.templates.demo<p>に挿入されます。
ここで、HTMLファイルにTemplatesCompiled.jsを通常のスクリプトとして含める必要があります。コンパイラ自体はもう必要ないため、ハンドルバーライブラリ全体をロードする必要はないことに注意することが重要です。代わりに、より小さな「ランタイム」ビルドを使用できます：<p>
<pre ><span >var context = {"language" : "Handlebars","adjective": "awesome"}<pre ><span ><span ><span ><script src<span >="/path/to/handlebars.min.js"><span ><span ></script>
次のコードを使用して、Demo.handlebarsに元々存在していたテンプレートを使用できます。
最終出力は次のとおりです
この方法はアプリケーションのパフォーマンスを大幅に向上させ、ページの読み込み時間も短縮されます。
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);この事前コンパイルデモのコードは、Githubで入手できます。
結論
この記事では、ハンドルバーの基本概念について説明しました。また、頻繁に使用される関数と構文を調べました。このチュートリアルを楽しんでいただければ幸いです。含まれているデモを使用して、このトピックをよく把握できます。あなたのコメントを読むことを楽しみにしています
ライブラリをダウンロードしたくないが、試してみたい場合は、http://tryhandlebarsjs.com/。
ハンドルバーに関する faq
handlebars.jsは、ダイナミックWebページを作成し、データに基づいてHTMLコンテンツを生成するためにWeb開発で使用されるJavaScriptテンプレートライブラリです。データ挿入用のプレースホルダー（ハンドルバー）を使用した再利用可能なテンプレートを作成できます。このライブラリは双方向のデータバインディングを容易にし、テンプレートがデータが変更されたときに自動的に更新できるようにします。開発者は一般に、クライアント側のレンダリング、条件付きロジック、およびデータの反復にHandleBars.jsを使用します。 HTML構造とデータ間の懸念の分離を促進するため、コードの保守性とセキュリティを強化しながら、インタラクティブおよびデータ駆動型のWebアプリケーションを構築するための貴重なツールになります。 >ハンドルバーは、通常、代替品としてではなく、HTMLと組み合わせて使用されます。動的なデータバインディング、コードの再利用性、プレゼンテーションとデータの懸念の明確な分離、クライアント側のレンダリング、コンテンツ生成の一貫性、コード分離によるセキュリティの強化、ローカリゼーションのサポートなど、HTMLと組み合わせると、いくつかの利点があります。これらの利点は、ハンドルバーにWebページの基本構造を定義するためにHTMLに依存しながら、ダイナミックで保守可能なWebアプリケーションを構築するための貴重なツールになります。 、ハンドルバーは非推奨ではなく、Web開発で実行可能で広く使用されているJavaScriptテンプレートライブラリのままです。ハンドルバーのテンプレートとは何ですか？
ハンドルバーテンプレートは、Web開発における動的HTMLコンテンツのレイアウトと構造を定義するテキストベースの構造です。 HandleBarsは、これらのテンプレートを作成できるJavaScriptテンプレートライブラリであり、データに基づいてHTMLコンテンツを簡単に生成できるようにします。
ハンドルバーテンプレートには、動的データを表す「ハンドルバー」として知られるプレースホルダーを含めることができます。これらのハンドルバーは、二重の巻き毛装具{{}}に囲まれています。たとえば、
hello、{{name}}！
このシンプルなハンドルバーのテンプレートでは、{{name}}は「name nameと呼ばれる変数のプレースホルダーです。 。」 {name： "john"}などの特定のデータでこのテンプレートをレンダリングすると、ハンドルバーは{{{name}}を対応するデータ値に置き換えます：
こんにちは、ジョン！ < HandleBarsテンプレートは、プレゼンテーション（HTML構造）をデータから分離するため、一貫した保守可能なHTMLコンテンツを作成するために特に役立ち、更新と再利用を容易にします。 Webアプリケーション全体のテンプレート。ハンドルバーはより高度な機能を提供し、より大きなエコシステムとコミュニティサポートが重要な複雑なテンプレートニーズやプロジェクトに適しています。一方、口ひげはよりシンプルで、「論理のない」哲学に従っているため、複数のプログラミング言語でシンプルさと移植性を優先するプロジェクトに適しています。
以上がハンドルバーへの初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
