使用ExpressHandlebars视图引擎在Express4.x框架中渲染部分视图

Render a partial view in Express 4.x framework using Express-Handlebars view engine

本文关键字：视图 染部 框架 Express4 ExpressHandlebars 引擎 使用      更新时间：2024-05-31

我正试图使用Express框架创建一个nodejs应用程序，该框架以Express handlers作为查看引擎，但在尝试查看主页时遇到了以下错误：

Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed [object Object]

有人能告诉我这里出了什么问题吗。

github回购链接：https://github.com/bdinesh/LearningNode.git

下面是我试图运行的代码：

index.js

var express = require('express'),
    app = express(),
    hbs = require('express-handlebars'),
    // Create `ExpressHandlebars` instance with a default layout.
    hbsInstance = hbs.create({ 
        defaultLayout: 'main', extname: '.hbs'
    }),
    fortune = require('./lib/fortune.js'),
    weatherData = require('./lib/weather.js'); 
app.engine('hbs', hbsInstance.engine);
app.set('view engine', 'hbs');
app.set('port', process.env.PORT || 3000);
app.use(express.static(__dirname + '/public'));
app.use(function(req, res, next) {
    if (!res.locals.partials) {
        res.locals.partials = {};
    }
    res.locals.partials.weather = weatherData.getWeatherData();
    next();
});
app.get('/', function(req, res) {
    res.render('home');
});
app.listen(app.get('port'), function() {
    console.log('Express started on http://localhost:' + app.get('port'));
});

weather.js这被放在lib文件夹中

exports.getWeatherData = function getWeatherData() {
    return {
        locations: [
            {
                name: 'Portland',
                forecastUrl: 'http://www.wunderground.com/US/OR/Portland.html',
                iconUrl: 'http://icons-ak.wxug.com/i/c/k/cloudy.gif',
                weather: 'Overcast',
                temp: '54.1 F (12.3 C)',
            },
            {
                name: 'Bend',
                forecastUrl: 'http://www.wunderground.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://www.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)',
            },
        ],
    };
};

weather.hbs（局部视图）它位于views/partials文件夹中。

<div class="weatherWidget">
    {{#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://www.wunderground.com">Weather Underground</a></small>
</div>

home.hbs放置在视图文件夹中

<h1>Welcome to Meadowlark travel</h1>
{{> weather}}

请更改您的代码如下：

<div class="weatherWidget">
{{#each partials.weatherData.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://www.wunderground.com">Weather Underground</a></small>

不幸的是，在使用Node和Express进行的令人惊叹的Web开发中存在一些过时的部分和错误。

有关勘误表，请参阅此处：http://www.oreilly.com/catalog/errata.csp?isbn=0636920032977以下是您遇到的问题：https://github.com/EthanRBrown/web-development-with-node-and-express/issues/28

相关文章：