どのように私はExpressのレイアウトにテンプレートからコンテンツを渡すのですか?
-
25-09-2019 - |
質問
私は基本Expressサーバを持っています:
// server.js:
var Express = require('express');
app = Express.createServer();
app.configure(function(){
app.set('views', Path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.set('view options');
});
app.get('/', function (request, response) {
response.render('welcome', {
locals: {some: 'Locals'}
});
});
基本ヒスイのレイアウトでは、
// views/layout.jade:
!!! 5
html(lang='en')
head
title= pageTitle
body
h1= pageTitle
aside(id="sidebar")= sidebarContent
#content
#{body}
とシンプルなページ:
# views/welcome.jade:
// How do I pass pageTitle and sidebarContent out to the layout from here?
p
Welcome to my fine site!
(Railsでは、これはcontent_for
または単純なインスタンス変数のようなものかもしれません。)
解決
についてdynamicHelpers上の先端を使用して、とクロージャの魔法、私がリクエストオブジェクトを介さずに動作し、かなりエレガントな解決策を見つけました。トリックはそれを回避する()とセット()関数を提供して閉鎖にページタイトルの変数をラップし、そのラッパーオブジェクトにPAGE_TITLEダイナミックヘルパーの結果を作ることです。
property.jsを作成します:
exports.create = function () {
var value = null;
return {
get: function () {
return value;
},
set: function (new_value) {
value = new_value;
}
};
}
だから、()を呼び出すを作成すると、そのgetおよびクロージャ変数を設定します。
は、get()とその上にセット()メソッドを持つオブジェクトを返します。次に、あなたのアプリケーションのセットアップコードでます:
var property = require("./property.js");
app.dynamicHelpers ({
page_title: function () {
return property.create ();
}
});
ダイナミックヘルパーの値は、その関数を呼び出した結果ですので、あなたのビューとテンプレートで、PAGE_TITLE変数は、get(とラッパーオブジェクトになります)とセット()関数ます。
あなたのビューでは、あなたが言うことができます:
- page_title.set ("my specific page title");
そして、あなたのレイアウトでます:
title= page_title.get()
property.jsにこれを追加して、ビットこれをさらに簡単にするために
exports.creator = function () {
return function () {
return exports.create();
};
}
は、あなたがこれまでダイナミックヘルパー宣言ブロックを簡略化することができます
var property = require("./property.js");
app.dynamicHelpers ({
page_title: property.creator()
});
他のヒント
Expressは、「ブロック」または彼らがレールに、しかし、あなたはヘルパーの組み合わせを(使用できることを呼び出して何でも)とdynamicHelpersの先入観を持っていない()似たような<のhref = "HTTPを達成するために:// expressjs.com/guide.html#app-helpers-obj-」のrel = "noreferrer"> http://expressjs.com/guide.html#app-helpers-obj- の
渡された地元の人々は、レイアウトといえページビュー
の両方にご利用いただけますlayout.jade
# the following function is a safe getter/setter for locals
- function pagevar(key, value) { var undef; return (value===undef) ? locals[key] || null : locals[key] = value; }
block config
#intended as a non-rendered block so that locals can be overridden.
# put your defaults here... - use append in the child view
!!!
html
head
title=pagevar('title')
meta(name='description',content=pagevar('description'))
...
page.jade
append config
- locals.title = 'override';
- locals.description = 'override 2';
- pagevars('somekey', 'some value');
...
イージーpeazyます。
あなたはこの小さなスニペットを使用することによってそれを行うことができます。
prop.jsます:
var hash = {};
module.exports = function() {
return {
set: function(key, val) { hash[key] = val },
get: function(key) { return hash[key] }
};
};
server.jsます:
app.dynamicHelpers({ prop: require(__dirname + '/views/helpers/prop') });
<時間>
表示:
<% prop.set('foo', 'bar') %>
レイアウトます:
<%= prop.get('foo') %>
地元の人々にそれを渡します{some: 'Locals', pageTitle: 'Welcome!'}
エクスプレス3テンプレートに依存しないため、express-partials
app.use (req, res, next)->
req.locals = {} unless req.locals
res.locals.content_for = (k, v = null)->
if !v
req.locals[k]
else
req.locals[k] = v
next()