动态网页中Handlebars Partials无法渲染问题求助

看起来你遇到的核心问题是局部模板newTwit没被正确加载渲染，其他内容正常说明基础的Handlebars配置和页面渲染流程是通的，我帮你梳理两个关键问题点：

1. 数据上下文变量名不匹配 #

你在server.js里向模板传递的数据是：

res.status(200).render('newView', {data: twitData});

但在newView.handlebars里却尝试遍历twitData变量：

{{#each twitData}}
  {{> newTwit}}
{{/each}}

模板里根本找不到twitData这个变量名，自然不会触发遍历和局部模板渲染。你有两种修正方式：

方式一：修改模板的遍历对象 #

把模板里的twitData改成你传递的data：

<main class="twit-container">
  {{#each data}}
    {{> newTwit}}
  {{/each}}
</main>

方式二：修改服务器端的参数键名 #

把传递给模板的键名改成twitData，和模板里的变量名保持一致：

app.get('/', function (req, res) {
  res.status(200).render('newView', {twitData: twitData});
});

2. 局部模板未正确注册 #

express-handlebars不会自动识别并加载你的局部模板，必须手动配置局部模板目录或者单独注册模板。

推荐方案：配置局部模板目录 #

假设你的newTwit.handlebars放在views/partials目录下，修改server.js里的引擎初始化代码，指定partials的存放路径：

var path = require('path');
var express = require('express');
var exphbs = require('express-handlebars');
var fs = require('fs');
var app = express();

// 初始化引擎时指定partials目录
app.engine('handlebars', exphbs({
  partialsDir: path.join(__dirname, 'views/partials')
}));
app.set('view engine', 'handlebars');

// ... 其余代码保持不变

备选方案：手动注册单个局部模板 #

如果你的局部模板不在标准目录下，也可以直接读取文件内容注册：

var hbs = exphbs.create({});
// 读取局部模板文件并注册
hbs.handlebars.registerPartial(
  'newTwit', 
  fs.readFileSync('./path/to/newTwit.handlebars', 'utf8')
);
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

先修正变量名匹配问题，再确认局部模板的注册配置，这两个点应该就能解决你的局部模板不加载的问题了。

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