javascript - Express でテンプレートからレイアウトにコンテンツを渡すにはどうすればよいですか?

Question

基本的な 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単純なインスタンス変数のようなものかもしれません。)

Answer 1

上記の dynamicHelpers に関するヒントとクロージャーの魔法を使用して、リクエスト オブジェクトを使用せずに機能するかなり洗練されたソリューションを見つけました。秘訣は、ページ タイトル変数を get() および set() 関数を提供するクロージャーでラップし、そのラッパー オブジェクトを page_title 動的ヘルパーの結果にすることです。

property.js を作成します。

exports.create = function () {
    var value = null;
    return {
        get: function () {
           return value;
        },
        set: function (new_value) {
           value = new_value;
        }
    };
}

そのため、create() を呼び出すと、クロージャ変数を取得および設定する get() および set() メソッドを含むオブジェクトが返されます。

次に、アプリのセットアップ コードで次のようにします。

    var property = require("./property.js");
    app.dynamicHelpers ({
        page_title: function () {
         return property.create ();
        }
    });

動的ヘルパーの値はその関数を呼び出した結果であるため、ビューとテンプレートでは、page_title 変数は get() および set() 関数を持つラッパー オブジェクトになります。

あなたの見解では、次のように言えます。

- 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()
        });

Answer 2

Express には、「ブロック」またはレールでそれを呼び出すものについての先入観はありませんが、helpers() と dynamicHelpers() の組み合わせを使用して、同様のことを実現できますhttp://expressjs.com/guide.html# app-helpers-obj-

渡されたローカルは、レイアウトとページ ビューの両方で使用できますが、

Answer 3

レイアウト.ジェイド

# 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');
...

簡単にピージー。

Answer 4

この小さなスニペットを使用してそれを行うことができます。

prop.js:

var hash = {};
module.exports = function() {
    return {
        set: function(key, val) { hash[key] = val },
        get: function(key) { return hash[key] }
    };
};

サーバー.js:

app.dynamicHelpers({ prop: require(__dirname + '/views/helpers/prop') });

---

意見：

<% prop.set('foo', 'bar') %>

レイアウト：

<%= prop.get('foo') %>

Answer 5

ローカルで渡します：{some: 'Locals', pageTitle: 'Welcome!'}