代码之家 › 专栏 › 技术社区 › James A. Rosen

如何在Express中将内容从模板传递到版面?

pug node.js javascript

James A. Rosen · 技术社区 · 15 年前

我有一个基本的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!

content_for 或者一个简单的实例变量。)

6 回复 | 直到 15 年前

Jake 14 年前

使用上面关于dynamicHelpers的技巧和闭包的魔力,我发现了一个相当优雅的解决方案,它可以在不涉及请求对象的情况下工作。诀窍是将page title变量包装在一个闭包中,该闭包在变量周围提供get()和set()函数,并使包装器对象成为page\u title动态助手的结果。

创建属性.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\u title变量将是get()和set()函数的包装器对象。

- page_title.set ("my specific page title");

在你的布局中:

title= page_title.get()

exports.creator = function () {
    return function () {
        return exports.create();
    };
}

允许您将动态助手声明块简化为:

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

tjholowaychuk 15 年前

http://expressjs.com/guide.html#app-helpers-obj-

但是,传递的局部变量对布局和页面视图都可用

Tracker1 12 年前

布局.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'))
...

佩奇.杰德

append config
  - locals.title = 'override';
  - locals.description = 'override 2';
  - pagevars('somekey', 'some value');
...

别紧张。

deadrunk NebojÅ¡a StojkoviÄ 12 年前

道具js:

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

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

查看:

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

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

robert vano 13 年前

把它传给当地人: {some: 'Locals', pageTitle: 'Welcome!'}

denysonique 12 年前

对于express3模板不可知,与 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()