私はExpress.js(Node.js上)を使用しており、「locals」パラメーターを介してカスタムデータを含むビューをレンダリングできることを知っています。 (res.render("template", { locals: { foo: "bar" } });
)
「グローバル」にする方法はありますか? (つまり、すべてのビューからアクセスできるデータ)
私が見た view options
ですが、再帰的ではないため、テンプレートでローカルを使用すると、設定したローカルが置き換えられます。
これは私の使用例です。CSS/ JSファイルをページごとに追加できるようにしたいと思います。これは私のメインレイアウトの一部です。問題は、すべてのレンダリングでこれらの配列を明示的に設定しないと、未定義のエラーが発生するため、テンプレートで常にtypeof css !== "undefined"
ダンス。さらに、各フォームに明示的に追加したくない他の選択ボックスオプションリストがあります。
Express 3のリリース以降、この質問に遭遇した可能性のある人にとって、メソッド 'dynamicHelpers'が存在しないことは注目に値します。
代わりに、値または関数を格納できるオブジェクトとして機能するapp.locals関数を使用して、それらをビューで使用できるようにすることができます。例えば:-
// In your app.js etc.
app.locals.title = "My App";
app.locals({
version: 3,
somefunction: function() {
return "function result";
}
});
// Then in your templates (shown here using a jade template)
=title
=version
=somefunction()
// Will output
My App
3
function result
情報をプルするためにリクエストオブジェクトにアクセスする必要がある場合は、単純なミドルウェア関数を記述して、app.settings変数を使用できます。
たとえば、ユーザーにメッセージを提供するためにconnect-flashを使用している場合は、次のようにします。
app.use(function(req, res, next) {
app.set('error', req.flash('error'));
next();
});
これにより、テンプレートの= settings.errorでエラーメッセージにアクセスできます。
これらのトピックは、少しではありますが、ここで説明されています。 http://expressjs.com/api.html#app.locals
app.locals
は単純なJavaScriptオブジェクトになりました。そのため、すべてのプロパティを1つずつ設定する必要があります。
app.locals.version = 3;
app.locals.somefunction = function() {
return "function result";
}
res.locals
は、アプリケーション全体のデータではなく要求固有のデータに使用する必要があることを除いて、まったく同じ機能を提供します。ユーザーオブジェクトまたは設定は、一般的な使用例です。
res.locals.user = req.isAuthenticated() ? req.user : null;
res.locals.userSettings = {
backgroundColor: 'fff'
}
動的ビューヘルパーを使用して、ビューに「グローバル」変数を設定する方法があります。
Express.jsガイドから:
app.dynamicHelpers(obj)
動的ビューヘルパーを登録します。動的ビューヘルパーは、req、resを受け入れる単純な関数であり、ビューがレンダリングされる前にサーバーインスタンスに対して評価されます。この関数の戻り値は、関連付けられているローカル変数になります。
app.dynamicHelpers({session:function(req、res){return req.session;}});
すべてのビューでセッションが利用可能になり、セッションデータにsession.nameなどを介してアクセスできるようになります。
これらの使用方法の実際の例は、ここにあります: https://github.com/alessioalex/Nodetuts/tree/master/express_samples (node app.js to start the app)
作者が述べたように、ビューオプションを使用する実際の例:
var app = express.createServer();
app.configure(function() {
app.set('views', path.join(__dirname, '..', 'views'));
app.set('view engine', 'jade');
app.set('view options', {
assetVersion: 1
});
そして、私のlayout.jade(私の場合はアプリのベーステンプレート)で:
link(rel='stylesheet', href='/static/css/' + assetVersion + '/style.css')
script(src='/static/js/' + assetVersion + '/script.js')
この小さなトリックにより、assetVersion
変数を1か所更新するだけで、アセットがVarnishや他の場所にキャッシュされないようにすることができます。
私はソースコードを調べてみましたが、実際には、これがExpressのどのバージョンでも不可能であることがわかりました。 (これまでのところ、GitHubでのみ利用可能)
これを行う最も簡単な方法は、ビューのローカルのデフォルトセットを表す変数を作成することです。次に、オブジェクトを受け取り、それをローカルにマージして、マージされたオブジェクトを返す関数を作成します。
私もコンテナオブジェクト内のすべてのローカルを渡しますつまり{locals:{g:{prop:val}}}
なので、私の見解ではg.prop
は、未定義のエラーをスローする代わりに、設定されていない場合にnull
を返すだけです。
function default_page_vars(custom_vars){
var vars = {
footer: true,
Host: req.headers.Host.split(':')[0],
config: this.config
};
if(custom_vars){
for(var k in custom_vars){
vars[k] = custom_vars[k];
}
}
return {
g:vars
};
}
//within your handler
response.render(view, {
locals: default_page_vars(other_locals)
});
これは埋もれた応答ですが、ようやく動作しました。
1)これはモジュールの例ですconnect-flash
2)server.js/app.jsにミドルウェアを追加して、req
をlocals
に追加します。これにより、テンプレートは必要なときにいつでもrequest.flash()
を呼び出すことができます。これがないと、flash()
は目的を無効にする各リクエスト/リダイレクトで消費されます。
var app = module.exports = express()
, flash=require('connect-flash');
app.configure(function(){
...
app.use(express.session({ secret: "shhh" }));
// Start Router
app.use(flash());
app.use(function(req, res, next) {
res.locals.request = req;
next();
});
app.use(app.router);
});
3)通常どおりルートを設定します(これはコーヒースクリプトですが、特別なものはありません)
app.get '/home', (req, res) ->
req.flash "info", "this"
res.render "#{__dirname}/views/index"
4)メッセージが必要なときにrequest.flash()を呼び出します。それらは呼び出しごとに消費されるので、console.logしないでください。
!!!
html
head
title= config.appTitle
include partials/_styles
body
include partials/_scripts
#header
a(href="/logout") Logout CURRENTUSER
h2= config.appTitle
#messages
- var flash = request.flash()
each flashType in ['info','warn','error']
if flash[flashType]
p.flash(class=flashType)
= flash[flashType]
block content
h1 content here
エクスプレス4
アプリケーション内でレンダリングされたテンプレートのローカル変数にアクセスできます。
したがって、テンプレートでローカルを使用する場合=>ノード/エクスプレスアプリケーションにテンプレートエンジンnpmがインストールされていると想定します。
まず、app.js
ファイルのカスタム変数を使用して express locals objects を設定する必要があります。複数の値が必要な場合は、オブジェクトを使用できます(この場合は役職)
/**
* Set locals object
*/
app.locals.layoutData = {
site: {
title: 'MyWebSiteTitle',
},
metaTag: {
charset: 'UTF-8',
description: 'MyDescription',
keywords: 'keyword-1,keyword-2,...',
author: 'MyName',
viewport: 'width=device-width, initial-scale=1.0'
}
};
次に、テンプレートファイルlayout.pug
の値にアクセスするには(PUGテンプレートエンジンの場合))
doctype html
html
head
//title
title #{locals.layoutData.site.title}
//Describe metadata
meta(charset=layoutData.metaTag.charset)
meta(name='description', content=locals.layoutData.metaTag.description)
meta(name='keywords', content=locals.layoutData.metaTag.keywords)
meta(name='author', content=locals.layoutData.metaTag.author)
meta(name='viewport', content=locals.layoutData.metaTag.viewport)
body
block content
br
hr
footer
p All rights reserved © 2018 | #{locals.layoutData.site.title}
テスト済み
"dependencies": {
"express": "^4.16.3",
"pug": "^2.0.3"
}