如何在express+Handlebars.js环境中获取加载的partial模板名称

服务端实现方案 #

方案1：无侵入Hook原生partial逻辑（无需修改现有模板代码） #

直接重写Handlebars内置的partial调用方法，将partial名称注入到渲染上下文即可：

const express = require('express');
const hbs = require('express-handlebars');
const app = express();

const handlebarsInstance = hbs.create({
  extname: '.handlebars',
  layoutsDir: __dirname + '/views/layouts',
  partialsDir: __dirname + '/views/partials', // 替换为你的partial存放目录
});

// 覆盖原生partial调用逻辑，注入自定义变量
const originalInvokePartial = handlebarsInstance.handlebars.VM.invokePartial;
handlebarsInstance.handlebars.VM.invokePartial = function(partial, context, options, params, partialName) {
  // 注入partial名称
  context.currentPartialName = partialName;
  // 如需完整路径，直接拼接partials目录即可
  context.currentPartialFullPath = `${handlebarsInstance.partialsDir}/${partialName}.handlebars`;
  return originalInvokePartial.apply(this, arguments);
};

app.engine('handlebars', handlebarsInstance.engine);
app.set('view engine', 'handlebars');

配置完成后，直接在任意partial模板中使用{{currentPartialName}}即可获取当前partial的名称，使用{{currentPartialFullPath}}获取完整文件路径。

方案2：自定义partial渲染助手（可灵活扩展） #

如果需要更灵活的控制逻辑，可以自定义渲染助手替换原生的{{> }}语法：

1. 注册助手：

handlebarsInstance.handlebars.registerHelper('renderPartial', function(partialName, options) {
  const renderContext = Object.assign({}, this, {
    currentPartialName: partialName,
    currentPartialFullPath: `${handlebarsInstance.partialsDir}/${partialName}.handlebars`
  });
  let partial = handlebarsInstance.handlebars.partials[partialName];
  if (typeof partial !== 'function') {
    partial = handlebarsInstance.handlebars.compile(partial);
  }
  return new handlebarsInstance.handlebars.SafeString(partial(renderContext, options));
});

2. 模板中调用（替换原有{{> partialname}}写法）：

{{{renderPartial 'partialname'}}}

注：使用三个大括号避免渲染结果被转义

客户端获取方案 #

如果需要在浏览器端获取partial信息，可在partial模板的根节点添加自定义属性：

<!-- partial模板内 -->
<div class="partial-root" data-partial="{{currentPartialName}}" data-partial-path="{{currentPartialFullPath}}">
  <!-- 原有partial内容 -->
</div>

客户端JS直接读取属性即可：

document.querySelectorAll('.partial-root').forEach(el => {
  const partialName = el.dataset.partial;
  const partialPath = el.dataset.partialPath;
  // 执行后续业务逻辑
});

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