ハンドルバー4.0を備えたインラインの部分的およびデコレータを使用します

クライアント側とサーバー側のレンダリング用の人気のJavaScriptテンプレートライブラリであるHandleBarsは、改善されたテンプレート管理のための口ひげ仕様を拡張します。 新規参入者の場合は、複数のコースを介してハンドルバーを使用してJavaScriptテンプレートを探索することをお勧めします。 ハンドルバー4.0（2015年9月）は、大幅な強化を導入しました：インラインの部分的およびデコレーター。この記事では、構文と最適な使用法の詳細を説明します。

重要な概念：

ハンドルバー4.0の重要な機能：インラインパート（再利用可能なテンプレート）およびデコレータ（レンダリング状態を変更）。

インライン部分：テンプレート内で定義され、JavaScript登録の必要性を排除します。 それらは、現在およびネストされたスコープへのブロックスコープの制限的な使用です。小さく、再利用可能なHTMLスニペットに最適です
• デコレーター：ハンドルバープログラム機能を変更し、実行前にランタイムに影響を与えます。 コンテキストデータまたはヘルパーを変更するのに役立ちます
デコレーターは、通貨のフォーマットなどのタスクに特に有益である、コードのモジュール性、拡張性、およびテスト能力を向上させます。 両方の機能は、フロントエンド開発を合理化するため、よりクリーンで整理された、潜在的に効率的なコードをもたらします。
• インライン部分
• 一般的なテンプレートの概念である
部分的なものは、再利用可能なテンプレートを個々のファイルに分離することにより、コードの再利用を促進します。 ただし、ハンドルバーの従来の部分には、グローバル範囲、JavaScriptの登録が必要なグローバル範囲（しばしば事前コンパイラーによって処理されますが）、および使用状況からの分離があります。 これは、多くの場合、それらの使用を最大の再利用可能なコードブロックのみに制限します。
• インライン部分はこれらの問題に対処します。ハンドルバーの構文を使用してテンプレート内で定義されているため、JavaScript登録は必要ありません。それらのブロックスコープされた性質は、それらの使用を現在と子のスコープに限定します。 個別のファイルには小さすぎるか、単一のテンプレート内でのみ使用される小型で再利用可能なHTMLセグメントのインライン部分を選択します。 インライン部分を使用して

再利用可能なコードを

でラッピングすることにより、インライン部分を宣言します。 次に、テンプレート内で

。

で使用します

例：

{{firstName}} {{lastName}}

を繰り返す代わりに、インライン部分：{{#* inline "partialName"}} ... {{/inline}}を使用します {{> partialName}}

部分的な部分とインラインの部分的な部分を比較

：<li>{{firstName}} {{lastName}}</li>の繰り返しのテンプレートを検討してください

• 従来の部分： Handlebars.registerPartial('fullName', '{{firstName}} {{lastName}}');を登録するために別のJavaScriptファイルが必要で、次にテンプレートで使用されます{{> fullName}}が必要です。 これにより、部分的な定義が分離され、完全なテンプレートの理解がより挑戦的になります。

• インライン部分：よりクリーンで自己完結型のアプローチ：

{{#* inline "fullName"}}
    {{firstName}} {{lastName}}
{{/inline}}

{{#each clients}}
    <li>{{> fullName}}</li>
{{/each}}

デコレーター

デコレーターは、ハンドルバープログラム機能を変更し、レンダリングプロセスに影響を与えます。 テンプレート機能を強化するメタデータを提供し、ヘルパー機能のより基本的なコンパニオンとして機能します。

ハンドルバーコンピレーションには次のものが含まれます。1。テンプレートの取得。 2。コンパイル。 3。出力のレンダリング。 デコレーターは、コンパイルステップ（

）に介入し、ブロックスコープ付きコンパイルされた関数に影響します。 レンダリング前に実行を制御し、コンテキストデータまたはヘルパーの変更を許可します。

Handlebars.compileデコレーターを使用して

デコレーターはを使用して登録されています。 関数は

。

を受信します Handlebars.registerDecorator() (program, props, container, context)

：
• コンパイルされたハンドルバー機能。 引数、返品値、またはコンテキストを変更します program：
ここに設定されたプロパティは、たとえ置き換えられたとしても、プログラム機能に影響します。 メタデータに役立ちます。
• props：
ハンドルバーランタイムコンテナ（部分、ヘルパー、コンテキスト）。変更可能。
• container：
デコレーターの引数とデータを含む親のコンテキスト
• デコレーターは、機能（または偽の値）を返して、変更されたテンプレートをレンダリングする必要があります。 context例：通貨のフォーマットハンドルバー4.0の前に、通貨のフォーマットはしばしばヘルパーに依存していました。 デコレーターは、よりエレガントなソリューションを提供します。

デコレーターは、コンテキストに基づいて通貨のフォーマットヘルパーを動的に登録できます。

次に、テンプレートで：

このアプローチは、ヘルパーだけを使用するよりもモジュール式で拡張可能で、テスト可能です。

結論

インラインの部分的およびデコレーターは、ハンドルバーを大幅に強化し、コード組織、再利用性、およびテスト能力を向上させます。 それらは、より保守可能で効率的なフロントエンドアプリケーションを構築するための貴重なツールです。

以上がハンドルバー4.0を備えたインラインの部分的およびデコレータを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。