如何将Handlebars模板中的助手函数参数传递至服务器端?
问题解决:Handlebars助手无法接收模板传递的参数
哦,我一眼就看出问题出在哪了——你在注册test助手的时候搞混了助手注册时机和模板调用时机,导致模板里的3根本传不到助手函数里😉
问题根源
你当前在viewHelper模块里是这么注册test助手的:
helpers: { test: require('./viewHelpers/test')(num), // 这里的num未定义,而且提前执行了函数! // ...其他助手 }
这里你直接调用了test函数,还传了一个根本不存在的num变量。但Handlebars的助手逻辑是:助手函数是在模板渲染时才会被调用,模板里写的{{test 3}}中的3会作为参数自动传递给助手函数,你只需要把函数本身注册进去就行,不需要提前执行它。
修复步骤
1. 修改viewHelper模块的助手注册方式
把test助手的注册改成直接传入函数本身,不要提前执行:
module.exports = function(exphbs){ return exphbs.create({ defaultLayout: 'index', extname: 'hbs', helpers: { test: require('./viewHelpers/test'), // 只传函数,不调用 foo: require('./viewHelpers/foo'), bar: require('./viewHelpers/bar') } }); };
2. 保留你的test助手函数(它本身是正确的)
你的test函数已经正确接收了参数,现在模板传来的3会自动被赋值给num:
module.exports = function (num) { return num; // 现在这里的num就是模板里的3了 }
3. 验证效果
当你在模板里写{{test 3}}时,Handlebars会在渲染模板时调用test函数,并把3作为第一个参数传入,最终页面上会渲染出3。
额外说明(如果需要助手带配置参数)
要是你的助手需要一些初始化配置(比如固定的全局参数),可以用工厂函数的方式,比如:
// viewHelpers/test.js module.exports = function(config) { // 先处理配置 return function(num) { // 这里可以用config和模板传来的num return num * config.multiplier; } } // viewHelper.js里注册时 test: require('./viewHelpers/test')({ multiplier: 2 }), // 模板调用{{test 3}}会得到6
但你的场景不需要这个,所以直接用前面的简单方案就好。
内容的提问来源于stack exchange,提问作者peterHasemann
相关产品推荐
相关产品推荐

