如何將模板中的內容傳遞到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沒有一個先入為主的“塊”概念或者他們在rails中所稱的任何東西，但你可以使用helpers（）和dynamicHelpers（）的組合來實現類似http://expressjs.com/guide.html# APP-佣工，obj-

傳遞的本地可用於布局和頁面視圖

Answer 3

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

容易豌豆。

Answer 4

你可以通過使用這個小片段來做到這一點。

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') %>

Answer 5

對於Express 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()

Answer 6

傳遞給當地人： {some: 'Locals', pageTitle: 'Welcome!'}