车把部分未完全显示在布局中

时间:2014-08-03 09:47:08

标签: javascript express handlebars.js

我无法在最终的HTML输出中显示locations数据。会发生的是,{{#each}} weather2.handleblocks块之外的所有HTML都显示正常,但块内的所有内容都没有显示。 这是我想要在我的主要布局上显示的数据。我用我的应用程序文件中定义的函数包装数据。

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)'
        }
    ]
};
}

我将返回的对象分配到我的应用程序文件中matrix的{​​{1}}:

partials

名为weather2.handlebars的部分文件:

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

这将进入视图home.handlebars:

<div class="weatherWidget">
{{#each partials.matrix.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>

最后主要布局为main.handlebars:

<h1>Welcome to Meadowlark Travel</h1>
{{> weather2}}

编辑:继续最后的输出:

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="utf-8" />
    <title>Meadowlark Travel</title>

</head>
<body>
    <header><img src="/img/cat.png" alt="Meadowlark Travel Logo"></header>
    {{{body}}}

</body>
</html>

我也难以让各个部分正确显示(类似的部分问题),但我会在另一天问。

编辑:一些额外的信息:我使用最新的express4和把手+ express3-handlebars https://www.npmjs.org/package/express3-handlebars

1 个答案:

答案 0 :(得分:1)

这就是我解决问题的方法:

将中间件定义在应用程序文件中已定义的所有其他中间件之上(我被提醒为什么由于这个问题,代码中的中间件订购非常重要。)