昨天我决定学习把手,观看了一些教程等等。但是我在代码中遇到了一些奇怪的行为。
1)我有我的json数据:
{
"products": [
{
"name": "foo",
"price": 488.98,
"available": 3
},
{
"name": "bar",
"price": 520.89,
"available": false
}
]
}
2)我的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Handlebars</title>
</head>
<body>
<div id="divToPopulate">
<!-- population w/ data -->
</div>
<script id="hdtemp" type="text/x-handlebars-template">
{{#each products}}
{{#toUpper name}}
{{/toUpper}}
{{#toStrong}}
<h4>{{price}}</h4>
{{/toStrong}}
{{#if available}}
<p>{{available}}</p>
{{else}}<p>Out of stock</p>
{{/if}}
{{/each}}
</script>
<!-- scripts -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.js"></script>
<script src="script.js"></script>
</body>
</html>
3)和我的脚本:
$(document).ready(function(){
const inittemp = $('#hdtemp').html();
const template = Handlebars.compile(inittemp);
Handlebars.registerHelper("toUpper",(property)=>{
return new Handlebars.SafeString(`<h2>${property.toUpperCase()}</h2>`);
});
Handlebars.registerHelper("toStrong", (options)=>{
return new Handlebars.SafeString(`<p><strong>${options.fn(this)}</strong></p>`);
});
$.ajax("products.json").done((data)=>{
$('#divToPopulate').html(template(data));
console.log(data);
});
});
出于某种原因,当我渲染页面时,“ toStrong”帮助程序块表达式不起作用。
{{#toStrong}}
<h4>{{price}}</h4>
{{/toStrong}}
之前的那个(“ toUpper”)工作正常,但是一旦我使用options.fn(this)而不是{{price}},我就会得到黑色元素。 W / ctrl + shift + i,控制台中没有错误,其他所有功能似乎都正常。
知道有什么问题吗?谢谢!
附注:昨天我甚至遇到了最奇怪的事情,而使用options.fn
我有一个元素h4并使用了块expr。生成{{place}},并且有我的本地主机的地址,例如:
<h4>127.0.0.1:8080</h4>
最佳答案
您的toStrong
助手几乎是正确的。困扰您的是使用arrow function。
箭头函数不会创建自己的此上下文,因此它从封闭上下文具有其原始含义。
在块帮助器中使用箭头功能时,请执行以下操作:option.fn(this)
不是您期望的,this
不是当前的车把上下文,在您的情况下是document
。
因此,您正在做的就是将文档作为新的上下文传递。这就是块帮助器中的{{price}}
不显示任何内容的原因。但是,如果您执行{{../price}},它将打印正确的值。
注册车把助手时,应避免使用箭头功能。除非您知道后果。
Handlebars.registerHelper("toUpper", function(property){
return new Handlebars.SafeString(`<h2>${property.toUpperCase()}</h2>`);
});
Handlebars.registerHelper("toStrong", function(options){
return new Handlebars.SafeString(`<p><strong>${options.fn(this)}</strong></p>`);
});
您也可以更改toUpper助手的使用方式,因为它不是阻止助手。
{{{toUpper name}}} <!-- see below -->
要么
{{toUpper name}} <!-- html will be escaped in your case -->
代替
{{#toUpper name}}{{/toUpper}}
三重藏
车把{{expression}}返回的HTML值转义。如果你
不想让把手逃脱一个值,请使用“三重隐藏”,{{{
var data = {
"products": [
{
"name": "foo",
"price": 488.98,
"available": 3
},
{
"name": "bar",
"price": 520.89,
"available": false
}
]
};
$(document).ready(function(){
const inittemp = $('#hdtemp').html();
const template = Handlebars.compile(inittemp);
Handlebars.registerHelper("toUpper",function(property){
return `<h2>${property.toUpperCase()}</h2>`;
});
Handlebars.registerHelper("toStrong", function(options){
return new Handlebars.SafeString(`<p><strong>${options.fn(this)}</strong></p>`);
});
console.log(template(data));
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Handlebars</title>
</head>
<body>
<div id="divToPopulate">
<!-- population w/ data -->
</div>
<script id="hdtemp" type="text/x-handlebars-template">
{{#each products}}
{{{toUpper name}}}
{{#toStrong}}
<h4>{{price}}</h4>
{{/toStrong}}
{{#if available}}
<p>{{available}}</p>
{{else}}<p>Out of stock</p>
{{/if}}
{{/each}}
</script>
<!-- scripts -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.js"></script>
<script src="script.js"></script>
</body>
</html>
关于javascript - Handlebars 块表达不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43932566/