Handlebars TypeError: Cannot read property 'fn' of undefined
Handlebars TypeError: Cannot read property 'fn' of undefined
我创建了一个自定义车把助手,但当我没有为参数定义值时出现以下错误。
module.exports = function(src, color, classatr, options) {
if (typeof src === 'undefined') src = '';
if (typeof color === 'undefined') color = '';
if (typeof classatr === 'undefined') classatr = '';
var bg = '<table class="'+ classatr +'" cellpadding="0" cellspacing="0" border="0" width="100%">\
<tr>\
<td background="'+ src +'" bgcolor="'+ color +'" valign="top">\
<!--[if gte mso 9]>\
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">\
<v:fill type="tile" src="'+ src +'" color="#'+ color +'" />\
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">\
<![endif]-->\
<div>'
+ options.fn(this) +
'</div>\
<!--[if gte mso 9]>\
</v:textbox>\
</v:rect>\
<![endif]-->\
</td>\
</tr>\
</table>';
return bg;
}
如果我这样定义所有三个参数,这将起作用:
{{#bg-img 'assets/img/hero-header.jpg' '000000' 'my-class'}}
<container>
<row>
<columns>
</columns>
</row>
</container>
{{/bg-img}}
如果我没有定义参数控制台显示"Handlebars TypeError: Cannot read property 'fn' of undefined"。
{{#bg-img }}
<container>
<row>
<columns>
</columns>
</row>
</container>
{{/bg-img}}
关于我在这里做错了什么有什么想法吗?
更新:还按照下面的建议使用 "null" 检查,但仍然出现同样的错误。
if (typeof src === 'undefined' || src === null) src = '';
if (typeof color === 'undefined' || color === null) color = '';
if (typeof classatr === 'undefined' || classatr === null) classatr = '';
也许尝试检查你的属性是否为 null,而不是 undefined?
在您不想提供任何参数的地方使用 null
。所以,下面的代码应该可以工作:
{{#bg-img null null null}}
<container>
<row>
<columns>
</columns>
</row>
</container>
{{/bg-img}}
您不应在函数签名中声明可选参数。 Handlebars 将哈希对象放入传递给您的函数的提供的选项对象中。通过散列对象,您可以访问所有提供的参数。请参阅 Block Helpers Documentation 中的 "Hash Arguments" 部分。
module.exports = function(options) {
var src = options.hash.src;
var color = options.hash.color;
var classatr = options.hash.classatr;
if (typeof src === 'undefined') src = '';
if (typeof color === 'undefined') color = '';
if (typeof classatr === 'undefined') classatr = '';
...
我创建了一个自定义车把助手,但当我没有为参数定义值时出现以下错误。
module.exports = function(src, color, classatr, options) {
if (typeof src === 'undefined') src = '';
if (typeof color === 'undefined') color = '';
if (typeof classatr === 'undefined') classatr = '';
var bg = '<table class="'+ classatr +'" cellpadding="0" cellspacing="0" border="0" width="100%">\
<tr>\
<td background="'+ src +'" bgcolor="'+ color +'" valign="top">\
<!--[if gte mso 9]>\
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">\
<v:fill type="tile" src="'+ src +'" color="#'+ color +'" />\
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">\
<![endif]-->\
<div>'
+ options.fn(this) +
'</div>\
<!--[if gte mso 9]>\
</v:textbox>\
</v:rect>\
<![endif]-->\
</td>\
</tr>\
</table>';
return bg;
}
如果我这样定义所有三个参数,这将起作用:
{{#bg-img 'assets/img/hero-header.jpg' '000000' 'my-class'}}
<container>
<row>
<columns>
</columns>
</row>
</container>
{{/bg-img}}
如果我没有定义参数控制台显示"Handlebars TypeError: Cannot read property 'fn' of undefined"。
{{#bg-img }}
<container>
<row>
<columns>
</columns>
</row>
</container>
{{/bg-img}}
关于我在这里做错了什么有什么想法吗?
更新:还按照下面的建议使用 "null" 检查,但仍然出现同样的错误。
if (typeof src === 'undefined' || src === null) src = '';
if (typeof color === 'undefined' || color === null) color = '';
if (typeof classatr === 'undefined' || classatr === null) classatr = '';
也许尝试检查你的属性是否为 null,而不是 undefined?
在您不想提供任何参数的地方使用 null
。所以,下面的代码应该可以工作:
{{#bg-img null null null}}
<container>
<row>
<columns>
</columns>
</row>
</container>
{{/bg-img}}
您不应在函数签名中声明可选参数。 Handlebars 将哈希对象放入传递给您的函数的提供的选项对象中。通过散列对象,您可以访问所有提供的参数。请参阅 Block Helpers Documentation 中的 "Hash Arguments" 部分。
module.exports = function(options) {
var src = options.hash.src;
var color = options.hash.color;
var classatr = options.hash.classatr;
if (typeof src === 'undefined') src = '';
if (typeof color === 'undefined') color = '';
if (typeof classatr === 'undefined') classatr = '';
...