I've encountered an issue where the locations data is not appearing in my final HTML output. The HTML outside the {{#each}} block in weather2.handleblocks displays correctly, but everything inside the block does not show up.
Here is the data that I want to display on my main layout. I enclosed the data within a function defined in my application file.
function fetchWeatherData(){
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)'
}
]
};
}
I set the returned object to the matrix of partials in my application file like this:
app.use(function (req, res, next) {
if (!res.locals.partials) res.locals.partials = {};
res.locals.partials.matrix = fetchWeatherData();
next();
});
The partial file named weather2.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>
This will display on the view home.handlebars:
<h1>Welcome to Meadowlark Travel</h1>
{{> weather2}}
Finally, in the main layout main.handlebars:
<!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>
EDIT: Here is the final output:
<html lang="en"><head>
<script src="/vendor/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Meadowlark Travel</title>
</head>
<body>
<header><img src="/img/cat.png" alt="Meadowlark Travel Logo"></header>
<h1>Welcome to Meadowlark Travel</h1>
<div class="weatherWidget">
<small>Source: <a href="http://www.wunderground.com">Weather
Underground</a></small>
</div>
</body></html>
I'm also experiencing difficulty getting sections to display properly (similar issue with partials), but I'll address that at another time.
EDIT: Some additional information: I'm using the latest express4 and handlebars + express3-handlebars https://www.npmjs.org/package/express3-handlebars