使用Handlebars模板引擎无法在网页显示动态内容的问题

问题概述 #

• 使用Handlebars模板引擎开发，控制台无报错
• GET请求直接渲染index.hbs，HTML与CSS显示正常
• POST请求获取用户提交的城市名后，调用getCityWeather成功拿到WRAP_DATA（控制台已输出完整天气数据），但传递给index.hbs后，{{WRAP_DATA.xxx}}绑定的动态数据无法显示

相关代码 #

app.js #

const express = require('express');
const app = express();

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

app.use(express.urlencoded({extended:true}));   // 解析表单数据
app.use(express.static('./public'));
app.use(express.json());

app.get('/',(req,res)=>{
    res.render('index.hbs'); 
});

app.post('/', async (req,res)=>{
   const currentCity = req.body.city; 
   let WRAP_DATA = await getCityWeather(currentCity);  // 根据城市名获取天气数据
   console.log('Weather Info = ',WRAP_DATA); // 控制台已成功输出天气数据
   res.render('index.hbs',{WRAP_DATA});
});

控制台输出的WRAP_DATA #

description: 'overcast clouds',
humidity: 53,
visibility: 10,
windSpeed: 2.592,
winddeg: 32

index.hbs相关代码 #

<table>
    <tr class="detail">
        <td> <img src="../img/humidity.png" class="desc_icon"> </td>
        <td class="label">Humidity</td>
        <td class="value"> {{ WRAP_DATA.humidity }} %</td>
    </tr>
    <tr class="detail">
        <td> <img src="../img/visibility.png" class="desc_icon"> </td>
        <td class="label">Visibility</td>
        <td class="value"> {{ WRAP_DATA.visibility }} km</td>
    </tr>
    <tr class="detail">
        <td> <img src="../img/windspeed.png" class="desc_icon"> </td>
        <td class="label">Wind Speed</td>
        <td class="value"> {{ WRAP_DATA.windSpeed }} km/h</td>
    </tr>
    <tr class="detail">
        <td> <img src="../img/direction.png" class="desc_icon"> </td>
        <td class="label">Wind Direction</td>
        <td class="value"> {{ WRAP_DATA.winddeg }} °</td>
    </tr>
</table>

解决步骤 #

1. 显式设置视图目录 #

确保Express能正确定位到views文件夹，在app.js中添加：

const path = require('path');
app.set('views', path.join(__dirname, 'views'));

2. GET请求初始化空数据 #

GET请求渲染时传递空的WRAP_DATA对象，避免模板因变量未定义静默忽略后续渲染：

app.get('/',(req,res)=>{
    res.render('index.hbs', { WRAP_DATA: {} }); 
});

3. 修正模板变量语法 #

去掉变量两侧的空格，确保Handlebars解析无误：

<td class="value"> {{WRAP_DATA.humidity}} %</td>
<td class="value"> {{WRAP_DATA.visibility}} km</td>
<td class="value"> {{WRAP_DATA.windSpeed}} km/h</td>
<td class="value"> {{WRAP_DATA.winddeg}} °</td>

4. 调试数据传递状态 #

在模板中添加调试代码，验证WRAP_DATA是否成功传递：

<p>调试信息：{{WRAP_DATA}}</p>

如果页面显示调试信息：[object Object]，说明数据已传递，问题出在属性访问；若未显示，需检查POST请求中res.render的执行逻辑。

5. 捕获异步请求错误 #

给getCityWeather添加错误捕获，避免异步报错导致渲染失败：

app.post('/', async (req,res)=>{
   try {
       const currentCity = req.body.city; 
       let WRAP_DATA = await getCityWeather(currentCity);  
       console.log('Weather Info = ',WRAP_DATA); 
       res.render('index.hbs',{WRAP_DATA});
   } catch (err) {
       console.error('获取天气数据失败：', err);
       res.render('index.hbs', { WRAP_DATA: {} });
   }
});

内容的提问来源于stack exchange，提问作者Kishor