NodeJSフレームワークのテンプレートビュー機構の解析 Express_javascriptスキル

テンプレート エンジン

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

• Haml 実装Haml
• haml.js の後継であり、Express のデフォルトのテンプレート エンジンですJade
• 埋め込み JavaScript テンプレートEJS
• CoffeeScript ベースのテンプレート エンジンCoffeeKup
• jQuery テンプレート エンジン

の NodeJS バージョン

レンダリングの表示

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

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

コードをコピー コードは次のとおりです:

app.get('/', function(req, res){
res.render('index.jade', { title: 'CSSer の皆さん、Web フロントエンド テクノロジーに注目してください!' } );
}) ;

jade を使用したい場合は、それを設定できます。次のように:

コードをコピー コードは次のとおりです:

app.set('view Engine ', 'jade');

したがって、次のメソッドを使用できます:

コードをコピーします コードは次のとおりです:

res .render('index');

の代わりに:

コードをコピーします。 🎜> コードは次のとおりです。res.render('index.jade')

「ビュー エンジン」が設定されている場合、テンプレートの拡張名はオプションになり、複数のテンプレート エンジンを組み合わせて使用​​することもできます:

コードをコピーします コードは次のとおりです:res.render('another-page.ejs ');

Express にはビュー オプション設定も用意されており、これらの設定は各ビューがレンダリングされた後に適用されます。次のように設定できます:

コードをコピー コードは次のとおりです:app.set('view options', { layout: false

});

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

コードをコピーします コードは次のとおりです:res.render('csser-view.ejs', {layout: true });
パスを指定することで、独自のレイアウトを使用してシステムのデフォルトを置き換えることができます。たとえば、「ビュー エンジン」を jade に設定し、「./views/mylayout.jade」という名前のレイアウトをカスタマイズすると、次のようになります。次のように使用します:

コードをコピー コードは次のとおりです:

res.render('page', {layout: 'mylayout' });

それ以外の場合は拡張子を指定する必要があります:

コードをコピー コードは次のとおりです。

res.render( 'page', {layout: 'mylayout.jade' });

これらのパスは、

コードをコピーします コードは次のとおりです:

res.render(' page', {layout: __dirname '/http://www.jb51.net/mylayout.jade' });

これのより良い例は、カスタム EJS テンプレートの先頭と終了タグ:

コードをコピー コードは次のとおりです。

app.set('表示オプション', {
開く: '{{',
閉じる: '}}'
});

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

コードをコピーします コードは次のとおりです。

partial('comment', { collection: comments })

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

コードをコピー コードは次のとおりです。 partial('comment', comments);

> ;

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

• firstInCollection 最初のオブジェクトの場合、この値は true になります
• indexInCollection コレクション内のオブジェクトのインデックス値
• 最後のオブジェクトの場合、lastInCollection は true
• collectionLength コレクションの長さ

渡された (または生成された) ローカル変数が優先されますが、親ビューに渡されたローカル変数は子ビューでも使用できます。たとえば、partial('blog/post を使用してブログ投稿をレンダリングするとします。 ', post) ローカルに投稿を生成しますが、この関数を呼び出すビューにはローカル ユーザーが存在するため、ブログ/投稿ビューでも利用できます。

渡される (または生成される) ローカル変数が優先されますが、親ビューに渡されるローカル変数はサブビューでも引き続き有効です。したがって、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/index" " これにより、partial('index') を呼び出す必要性が減ります。