Return 来自 Handlebars Helper 的对象数组
Return array of objects from Handlebars Helper
我正在尝试编写一个帮助程序,它将 return 一个对象数组,然后可以对其进行循环。这是我现在拥有的:
Handlebars.registerHelper('testHelper', () => {
return [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
});
像这样使用它:
{{#entries this}}
<a href="/{{slug}}">{{title}}</a>
{{/entries}}
我收到数组中每个对象的 [object, Object]
,而不是单个值。请帮助:)
谢谢!
Handlebars 中助手的工作方式有点棘手。不是将数据从助手传递到主模板主体,而是将与助手相关的模板主体部分传递给助手。
因此,例如,当您执行此操作时:
{{#entries this}}
<a href="/{{slug}}">{{title}}</a>
{{/entries}}
您正在向 entries
助手提供两件事:
1)当前上下文(this)
2) 应用一些模板逻辑
助手获取这些物品的方式如下:
Handlebars.registerHelper('entries', (data, options) => {
// data is whatever was provided as a parameter from caller
// options is an object provided by handlebars that includes a function 'fn'
// that we can invoke to apply the template enclosed between
// #entries and /entries from the main template
:
:
});
所以,做你想做的事:
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var results = '';
data.forEach( (item) => {
results += opt.fn(item);
});
return results;
});
opt.fn(item)
应用模板的这一部分:
<a href="/{{slug}}">{{title}}</a>
想法是创建一个字符串(html 的一部分),然后将其返回并放入主模板制定的字符串中。
这是一个展示此工作原理的示例。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>
<script id="t" type="text/x-handlebars">
{{#testHelper this}}
<a href="/{{slug}}">{{title}}</a>
{{/testHelper}}
</script>
<script>
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var results = '';
data.forEach((item) => {
results += opt.fn(item);
});
return results;
});
var t = Handlebars.compile($('#t').html());
$('body').append(t({}));
</script>
</body>
</html>
让我也回应其他人一直试图告诉你的话。尝试在模板中填充数据没有多大意义。这应该作为上下文传递给您的模板以进行操作。否则,您会将业务逻辑与模板逻辑(视图)混合在一起,这会使事情不必要地复杂化。
下面是您可以在同一代码段中进行的简单更改,将数据传递到您的模板:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>
<script id="t" type="text/x-handlebars">
{{#testHelper this}}
<a href="/{{slug}}">{{title}}</a>
{{/testHelper}}
</script>
<script>
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var results = '';
data.forEach((item) => {
results += opt.fn(item);
});
return results;
});
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var t = Handlebars.compile($('#t').html());
$('body').append(t(data));
</script>
</body>
</html>
通过这种方式,您可以在 javascript 中检索数据并保留模板的预期用途 - 制定 html.
我正在尝试编写一个帮助程序,它将 return 一个对象数组,然后可以对其进行循环。这是我现在拥有的:
Handlebars.registerHelper('testHelper', () => {
return [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
});
像这样使用它:
{{#entries this}}
<a href="/{{slug}}">{{title}}</a>
{{/entries}}
我收到数组中每个对象的 [object, Object]
,而不是单个值。请帮助:)
谢谢!
Handlebars 中助手的工作方式有点棘手。不是将数据从助手传递到主模板主体,而是将与助手相关的模板主体部分传递给助手。
因此,例如,当您执行此操作时:
{{#entries this}}
<a href="/{{slug}}">{{title}}</a>
{{/entries}}
您正在向 entries
助手提供两件事:
1)当前上下文(this)
2) 应用一些模板逻辑
助手获取这些物品的方式如下:
Handlebars.registerHelper('entries', (data, options) => {
// data is whatever was provided as a parameter from caller
// options is an object provided by handlebars that includes a function 'fn'
// that we can invoke to apply the template enclosed between
// #entries and /entries from the main template
:
:
});
所以,做你想做的事:
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var results = '';
data.forEach( (item) => {
results += opt.fn(item);
});
return results;
});
opt.fn(item)
应用模板的这一部分:
<a href="/{{slug}}">{{title}}</a>
想法是创建一个字符串(html 的一部分),然后将其返回并放入主模板制定的字符串中。
这是一个展示此工作原理的示例。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>
<script id="t" type="text/x-handlebars">
{{#testHelper this}}
<a href="/{{slug}}">{{title}}</a>
{{/testHelper}}
</script>
<script>
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var results = '';
data.forEach((item) => {
results += opt.fn(item);
});
return results;
});
var t = Handlebars.compile($('#t').html());
$('body').append(t({}));
</script>
</body>
</html>
让我也回应其他人一直试图告诉你的话。尝试在模板中填充数据没有多大意义。这应该作为上下文传递给您的模板以进行操作。否则,您会将业务逻辑与模板逻辑(视图)混合在一起,这会使事情不必要地复杂化。
下面是您可以在同一代码段中进行的简单更改,将数据传递到您的模板:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
</head>
<body>
<script id="t" type="text/x-handlebars">
{{#testHelper this}}
<a href="/{{slug}}">{{title}}</a>
{{/testHelper}}
</script>
<script>
Handlebars.registerHelper('testHelper', (ignore, opt) => {
var results = '';
data.forEach((item) => {
results += opt.fn(item);
});
return results;
});
var data = [
{ slug: 'Test', title: 'This is it!' },
{ slug: 'Test 2', title: 'This is the second it!' },
];
var t = Handlebars.compile($('#t').html());
$('body').append(t(data));
</script>
</body>
</html>
通过这种方式,您可以在 javascript 中检索数据并保留模板的预期用途 - 制定 html.