Question

我正在学习表达并尝试使用部分视图。

App.js

var app = express();

var handlebars = require('express3-handlebars').create({defaultLayout: 'main'});

app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

handlebars.loadPartials(function(err, partials){
    console.log(partials);
});

app.set('port', process.env.port || 4000);

app.get('/', function(req, res){
    res.render('home');
});

function getWeatherData(){
    console.log('Building Weather Data');
    return {
        locations: [
            {
                name: 'Portland',
                forecastUrl: 'http://www.wunderground.com/US/OR/portland.html',
                iconUrl: 'http://icons-ak.wxug.com/i/c/k/couldy.gif',
                weather: 'Overcast',
                temp: '54.1 F (12.3 C)'
            },
            {
                name: 'Bend',
                forecastUrl: 'http://www.wundergroud.com/US/OR/Bend.html',
                iconUrl: 'http://icons-ak.wxug.com/i/c/k/partlycloudy.gif',
                weather: 'Partly Cloudy',
                temp: '55.0 F (12.8 C)'
            },
            {
                name: 'Manzanita',
                forecastUrl: 'http://wunderground.com/US/OR/Manzanita.html',
                iconUrl: 'http://icons-ak.wxug.com/i/c/k/rain.gif',
                weather: 'Light Rain',
                temp: '55.0 F (12.8 C)'
            }

        ]
    };
};

app.use(function(req, res, next){
    if(!res.locals.partials)
        res.locals.partials = {};

    res.locals.partials.weather = getWeatherData();
    next();
});

app.listen(app.get('port'), function(){
    console.log('Application started on http://localhost:' + app.get('port') + '; press ctrl+ C to end.');
});

home.handlebars

<h1> This is Partials home</h1>
{{>weather}}

main.handlebars（默认布局）

<!DOCTYPE html>
<html>
    <head>
        <title>
            Partials Example
        </title>
    </head>
    <body>
        {{{body}}}
    </body>
</html>

weather.handlebars（局部视图）

<div class="weatherWidget">
    <label>Data received for: {{partials.weather.locations.length}} cities</label>
    {{#each partials.weather.locations}}
        <div class="location">
            <h3>{{name}}</h3>
            <a href="{{forecastUrl}}">
                <img src="{{iconUrl}}" alt="{{weather}}">
                    {{weather}}, {{temp}}
            </a>
        </div>
    {{/each}}
    <small>Source: <a href="http://wunderground.com">Weather Underground</a></small>    
</div>

现在，当我运行应用程序时，我看不到页面上填充的数据。我所遵循的这个例子来自使用Node和Express的Web开发。

我正在使用的节点版本是v0.10.36，而对于把手我使用的是express3-handlebars插件。

Answer 1

您可能需要预先填充数据。即，运行

...
getWeatherData()
app.use(function(req, res, next){...

填充值后的函数。我认为这本书就是这样做的（之前我曾经用过它）

Answer 2

将“ res.locals.partials.weather ”的名称更改为“ res.locals.partials.weatherData ”[issue link]

您应该在呈现主页之前填充 res.locals.partials.weatherData ，移动代码：

app.use(function(req, res, next){
    if(!res.locals.partials)
        res.locals.partials = {};
    res.locals.partials.weather = getWeatherData();
    next();
})

之前：

app.get('/', function(req, res){
    res.render('home');
});

Answer 3

使用 app.use(function(req, res, next){..})之前的app.get('/')

Express Js - 使用把手部分视图

3 个答案: