概要を学習ハンドルバー


インストール

HBSは、2つの方法でインストール:

1.パッケージHBS既存のプロジェクトをインストールNPM

NPMインストールHBS --save

この方法は実際にプロジェクトにも設定する必要が使用する、唯一のNPMパッケージがプロジェクトにインストールされているライブラリHBSからである、そして我々は説明します

2. exprss-発電機は、HBSを使用してプロジェクトを作成します

このような状況では、プロジェクトが、NPMパッケージは特急プロジェクトテンプレートエンジンの選択肢のHBSを作成することを明示-発電機の使用を持っていない、です。

NPMインストール急行発電-g 

--hbsプロジェクト名を表現

 

これは、直接、テンプレートファイルをHBS書き込むことができ、その後、我々は追加の設定は必要ありません、app.js構成で行われている、HBSを使用して明示プロジェクトテンプレートを作成します。

 

コンフィギュレーション

ここでの設定は、最初のケースでは、インストールのために、それはHBSをサポートすることができるように構成したプロジェクトを表現するために参照していることを述べました。

App.jsは(「ビュー・エンジン」、「XXX」)app.setに見出さ、次のようにコードを読み取ります。

app.set( 'ビュー・エンジン'、 'HBS')。

ただ、その一つは、デフォルトのテンプレートエンジンとしてプロジェクトエクスプレスHBSを利用することができます。

 

デフォルトの拡張子を変更します。

あなたが見れば不幸この拡張機能をHBS、および修正することができます。変更方法は簡単で、app.set(「ビューエンジン」、「クール」)であり、これはクールにデフォルトの拡張子を変更することができるようになります。しかし、この時間は十分ではありません、クールもHBSのテンプレートエンジンとクールの間の関係を確立する必要が何であるかを知らない表現。

app.engine(、( 'HBS').__表現を必要とする 'クール');

わかりましたので、我々は冷静さを変えHBSからデフォルトのサフィックスを置きます。

 

選択された急行テンプレートエンジン戦略

デフォルトのファイル名の拡張子がない場合1.システム設定を取り、エンジンの拡張子に基づいて対応するテンプレートを取得します。

2.直接の拡張機能を使用してサフィックスは、適切なテンプレートエンジンをフェッチする場合。

テンプレートエンジンが共存の多様性を作ることは非常に能力を表現するには、追加の設定は必要ありません。

 

カスタムテンプレートヘルパーを提供

HBSのビジネスロジックの独立したテンプレートエンジン(ロジックレステンプレート)。テンプレート・ファイル内の、あまりにも複雑なコードを記述することは推奨されません。単純な関数が別のテンプレートファイル内に複数回出現するためにしかし、我々は、コードの再利用性を向上、ヘルパーとして登録registerHelper HBSが、それは、テンプレートファイルで直接呼び出すことができます提供されたコードを使用することができます。次のように登録ヘルパーメソッドは次のとおりです。

hbs.registerHelper( 'のsayHello'、関数(){

......

});

 

レジスタ上のコードの書き込みのテンプレートファイルを直接呼び出すことができsayHelloメソッド、の名前を入力します。この方法は、パラメータを定義することができます。メソッド呼び出しは、後ほどお話します。

 

部分テンプレートの使用の合理化

私たちは、多くの場合、コンテンツの途中の別の部分に、コードの頭と尾以上のページでも同じです、満たしています。だから我々はregisterPartialを使用できることを部分的に定義されました。あなたはそれを使用するテンプレートファイルの一部のテンプレートファイルへの直接参照。ヘルパーのようなコードの再利用の役割です。

hbs.registerPartial(名前、部分)。

例えば:

hbs.registerPartial( 'ヘッダ'、 '<HEAD> <タイトル> {{タイトル}} </タイトル> </ HEAD>')。

次のメソッドは、話をします呼び出します。

 

文法

テンプレートファイルに記述された文法についての続きの話。コンテキストの概念についての最初の話に先立ち。第二のパラメータは、テンプレートデータに渡され、コンテキスト(文脈)と呼ばれる、テンプレートエンジンを使用する方法はres.render(「テンプレートファイル名」、{})で発現します。

注記

{{! - コメントテキスト - }}

{{!}}注釈テキスト

どちらも、違いは、前者が保持されることがあり、コメントしているが、テンプレート・ファイル内の後者のコメントは、後に無HTMLにコンパイル。

 

単純な式

{{名前}}或{{{名前}}}

削除属性名がコンテキストから表示されます。後者の意志ではない前者は、脱出する内容だろう。そのような<P>ジョン</ P>のように名前を付け、前者は出力&LTであり; P&GT;ジョン&LT; / P&GT;後者が出力されます。

 

ブロック式

{{#if condition}}

......

{{IF /}}

#開始タグは、キーワードで終了される/キーワード

コールヘルパー

}}、{{のsayHello

必要なのsayHelloパラメータだけのようなコールの時に渡されたパラメータを、追加する必要がある場合のsayHelloは、私たちのヘルパーによって定義されます。

{{sayHello param1 param2}}

 

部分的に使用します

{{> mypartial}}

 

内蔵制御フローブロック

もし

{{#if 条件}}

......

{{IF /}}

{{#if 条件}}

....

{{そうしないと}}

...

{{IF /}}

 

とともに

その機能は、オブジェクト参照の深さを低減するために、ここでの仮定は、コンテキストであります

{

    名前:「PI少年ファンタジー漂流」

    著者:{

                 名前:「外国人」

                 祖国:{

                                      名前:「外来」

                                      位置:「大西洋」

                                   }

                }

}

 

私たちはこの国のためにいくつかのテンプレートがデータのブロックを表示すると、次のように:

国:{{ author.motherland.name }}

位置:{{}} author.motherland.position

重複したプレフィックスの多くは、あなたが使用することができ、この時間は、そこにあります

{{#withのauthor.motherland}}

祖国:名前

場所:位置

{{/}}と

 

レベルより深く、より多くのプロパティは、その恩恵は非常に明確である場合は、上記の例は、2つのプロパティのみです。

 

これは、サイクルを実現しています。

{{#each ARR}}

.....

{{/各}}

編曲はコレクションです。

 

カスタムブロック

上記のビルトインされたハンドル、我々は自分たちのニーズを満たすために、独自のブロックを定義することができます。メソッドの定義はregisterHelperを使用することは非常に簡単です。

hbs.registerHelper( 'myblock'、機能(オプション){

    (この)options.fn返します。

});

 

あなたはテンプレートで呼び出すことができます。

{{#私のブロック}}

<P>これは私myblockある</ P> {{タイトル}}

{{/私のブロック}}

 

!この呼び出しブロックテンプレートファイルのコンテキストは、値がクールでtitle属性を持っていると仮定すると、上記の呼び出しの結果は次のとおりです。

<P>これは私のmyblock </ P>クールです!

 

方法である中間ブロック、でコンパイルされたテンプレートコード断片options.fn呼び出すブロック定義のテンプレートを生成する方法。

 

リソース

https://github.com/donpark/hbs

公開された55元の記事 ウォン称賛39 ビュー80000 +

おすすめ

転載: blog.csdn.net/Chinese521/article/details/52043038