NodeJSフレームワークExpressのテンプレートビュー機構の解析-jsチュートリアル-php.cn

NodeJSフレームワークExpressのテンプレートビュー機構の解析

不言

リリース： 2018-06-30 10:15:46

オリジナル

1458 人が閲覧しました

この記事では主に NodeJS フレームワーク Express のテンプレートビューメカニズムの分析を紹介します。これを必要とする友人に共有します。

MVC モデルについても説明します。この記事では、Express フレームワークのテンプレートとビュー (V) に関連する機能を紹介します。

テンプレートエンジン

Express は多くのテンプレートエンジンをサポートしており、一般的に使用されるものは次のとおりです:

haml 実装 Haml
haml.js の後継、および ExpressJade のデフォルトのテンプレートエンジン
Coffeeup

Nodejs バージョン JQUERY テンプレートエンジンレンダリング (ビューレンダリング) ファイル名は、「」の形式に従う必要があります。 ." (デフォルトでは、はロードされるモジュールの名前です)。たとえば、ビューlayout.ejsはビューシステムにrequire('ejs')を指示し、ロードされたモジュールはexports.compile(str, options)メソッドを出力し、Expressのテンプレートインターフェイス規約に準拠する関数を返す必要があります。また、app.register() を使用してテンプレートエンジンを他のファイル拡張子にマップして、より柔軟なテンプレートエンジンの動作を実現し、「csser.html」を ejs エンジンでレンダリングできるようにすることもできます。

次に、Jade エンジンを使用して、index.html をレンダリングします。layout:false を設定していないため、index.jade のレンダリングされたコンテンツは、body ローカル変数としてlayout.jade に渡されます。

<SPAN style="FONT-SIZE: 13px">app.get(&#39;/&#39;, function(req, res){ 
res.render(&#39;index.jade&#39;, { title: &#39;CSSer, 关注Web前端技术！&#39; }); 
}); 
</SPAN>

ログイン後にコピー

新しい「ビューエンジン」設定では、デフォルトのテンプレートエンジンを指定できます。jade を使用したい場合は、次のように設定できます:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view engine&#39;, &#39;jade&#39;); 
</SPAN>

ログイン後にコピー

そのため、次のメソッドの代わりに

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index&#39;); 
</SPAN>

ログイン後にコピー

を使用できます。メソッド:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index.jade&#39;); 
</SPAN>

ログイン後にコピー

When 「ビューエンジン」を設定すると、テンプレート拡張機能がオプションになり、複数のテンプレートエンジンを組み合わせて一致させることもできます:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;another-page.ejs&#39;); 
</SPAN>

ログイン後にコピー

Express は、各ビューのレンダリング後に適用されるビューオプション設定も提供します。レイアウトを頻繁に使用しない場合は、次のように設定できます:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
layout: false 
}); 
</SPAN>

ログイン後にコピー

必要に応じて、これらの設定は後続の res.render() 呼び出しでオーバーライドできます:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;csser-view.ejs&#39;, { layout: true }); 
</SPAN>

ログイン後にコピー

path システムのデフォルトを置き換えるには、たとえば、「ビューエンジン」を jade に設定し、「./views/mylayout.jade」という名前のレイアウトをカスタマイズする場合、次のように使用できます:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout&#39; }); 
</SPAN>

ログイン後にコピー

それ以外の場合、拡張子は次のようにする必要があります。指定:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout.jade&#39; }); 
</SPAN>

ログイン後にコピー

これらのパスは絶対パスにすることもできます:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: __dirname + &#39;///www.jb51.net/mylayout.jade&#39; }); 
</SPAN>

ログイン後にコピー

これのより良い例は、カスタム ejs テンプレートの開始タグと終了タグです:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
open: &#39;{{&#39;, 
close: &#39;}}&#39; 
}); 
</SPAN>

ログイン後にコピー

部分ビュー

Express ビューシステムは、部分ビューとコレクションビューをネイティブにサポートします。ミニビューは、主にドキュメントのフラグメントをレンダリングするために使用されます。たとえば、ビュー内のコメントをループする代わりに、部分コレクションを使用します。

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, { collection: comments }); 
</SPAN>

ログイン後にコピー

他のオプションやローカル変数が必要ない場合は、オブジェクトを省略して、単純にコメント配列を渡すことができます。これは同じです。上記の例のように:

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, comments); 
</SPAN>

ログイン後にコピー

ローカルコレクションを使用する場合、いくつかの「マジック」ローカル変数がサポートされます:

渡された (または生成された) ローカル変数が優先されますが、親ビューに渡されたローカル変数は子ビューでも引き続き有効です。したがって、partial('blog/post', post) を使用してブログログをレンダリングすると、post のローカル変数が生成されますが、この関数を呼び出すビューにはローカルユーザーが存在し、ブログ内では引き続き有効です。 /ポストビュー。 (最初の注: この翻訳には何か問題があります。アドバイスをお願いします。)

パフォーマンスのヒント: 部分コレクションを使用して長さ 100 の配列をレンダリングする場合、単純なコレクションの場合は、部分コレクションを使用する代わりにループをインライン化することができ、システムを削減できます。オーバーヘッド。

ビューのルックアップ

ビューのルックアップは、「views/user/list.jade」という名前のページビューがあるとします ('edit')。 )、ビューシステムは「views/user/edit.jade」を検索してロードしようとしますが、partial('.. /messages') は「views/messages.jade」をロードします。

ビューシステムはインデックステンプレートもサポートしているため、同じ名前のディレクトリを使用できます。たとえば、ルート内で res.render('users') を実行します。これは、「views/users.jade」または「views/users/index.jade」を指します。

上記のインデックスビューを使用する場合、partial('users') を通じて同じ名前のディレクトリから "views/users/index.jade" を参照でき、ビューシステムは "../users/" を試行します。これにより、partial('index') を呼び出す必要性が減ります。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。