<body>
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="t" type="text/x-handlebars">
{{#each_when profile "gender" "female"}}
{{from}} ({{gender}})<br>
{{/each_when}}
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script>
var json = {
"profile": [
{ "gender": "female", "from": "Olivia" },
{ "gender": "female", "from": "Meagen" },
{ "gender": "female", "from": "Aaron" },
{ "gender": "female", "from": "Aaron" }
]
};
Handlebars.registerHelper('each_when', function(list, k, v, opts) {
console.log(arguments);
var i, result = '';
for(i = 0; i < list.length; ++i)
if(list[i][k] == v)
result = result + opts.fn(list[i]);
return result;
});
Handlebars.registerHelper('get_length', function (obj) {
return obj.length;
});
var t = Handlebars.compile($('#t').html());
$('body').append(t(json));
</script>
</body>
<!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>
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="t" type="text/x-handlebars">
{{#each_when profile "gender" "female"}}
{{from}} ({{gender}})<br>
{{/each_when}}
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script>
var json = {
"profile": [
{ "gender": "female", "from": "Olivia" },
{ "gender": "female", "from": "Meagen" },
{ "gender": "female", "from": "Aaron" },
{ "gender": "female", "from": "Aaron" }
]
};
Handlebars.registerHelper('each_when', function(list, k, v, opts) {
console.log(arguments);
var i, result = '';
for(i = 0; i < list.length; ++i)
if(list[i][k] == v)
result = result + opts.fn(list[i]);
return result;
});
Handlebars.registerHelper('get_length', function (obj) {
return obj.length;
});
var t = Handlebars.compile($('#t').html());
$('body').append(t(json));
</script>
</body>
</html>
结果:
- 奥利维亚(女)
- Meagen(女)
- 亚伦(女)
- 亚伦(女)
,但我只想第一个:
- 奥利维亚(女)
另外,我正在使用 {{@index}} 显示数组索引,但对我不起作用。我想念什么吗?
将助手更改为:
Handlebars.registerHelper('each_when', function(list, k, v, opts) {
var match = list.findIndex(function(item) {
return (item[k] === v);
});
return (match >= 0) ? opts.fn(list[match]) : '';
});
您想找到第一场比赛并仅返回该比赛的结果。
这是完整的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>
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="t" type="text/x-handlebars">
{{#each_when profile "gender" "female"}}
{{from}} ({{gender}})<br>
{{/each_when}}
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script>
var json = {
"profile": [
{ "gender": "female", "from": "Olivia" },
{ "gender": "female", "from": "Meagen" },
{ "gender": "male", "from": "Aaron" },
{ "gender": "male", "from": "Aaron" }
]
};
Handlebars.registerHelper('each_when', function(list, k, v, opts) {
var match = list.findIndex(function(item) {
return (item[k] === v);
});
return (match >= 0) ? opts.fn(list[match]) : '';
});
Handlebars.registerHelper('get_length', function (obj) {
return obj.length;
});
var t = Handlebars.compile($('#t').html());
$('body').append(t(json));
</script>
</body>
</html>
编辑以扩展评论的请求:
要获得每个独特性别的第一人称,您可以添加另一个助手:
Handlebars.registerHelper('each_unique', function(list, k, opts) {
var foundKeys = {},
results = '';
list.forEach(function(item) {
if (!foundKeys[item[k]]) {
results = results + opts.fn(item);
foundKeys[item[k]] = true;
}
});
return results;
});
要使用此方法,请尝试此修订后的示例(它的示例显示为gender
唯一,而from
唯一的示例。
<!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>
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="t" type="text/x-handlebars">
<p>With 'each_when':</p>
{{#each_when profile "gender" "female"}}
{{from}} ({{gender}})<br>
{{/each_when}}
<hr/>
<p>With 'each_unique' on gender:</p>
{{#each_unique profile "gender"}}
{{from}} ({{gender}})<br>
{{/each_unique}}
<hr/>
<p>With 'each_unique' on from:</p>
{{#each_unique profile "from"}}
{{from}} ({{gender}})<br>
{{/each_unique}}
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script>
var json = {
"profile": [
{ "gender": "female", "from": "Olivia" },
{ "gender": "female", "from": "Meagen" },
{ "gender": "male", "from": "Aaron" },
{ "gender": "male", "from": "Aaron" }
]
};
Handlebars.registerHelper('each_when', function(list, k, v, opts) {
var match = list.findIndex(function(item) {
return (item[k] === v);
});
return (match >= 0) ? opts.fn(list[match]) : '';
});
Handlebars.registerHelper('get_length', function (obj) {
return obj.length;
});
Handlebars.registerHelper('each_unique', function(list, k, opts) {
var foundKeys = {},
results = '';
list.forEach(function(item) {
if (!foundKeys[item[k]]) {
results = results + opts.fn(item);
foundKeys[item[k]] = true;
}
});
return results;
});
var t = Handlebars.compile($('#t').html());
$('body').append(t(json));
</script>
</body>
</html>
each_unique
辅助器更为复杂,因为如果我们已经报告了此密钥值,则必须跟踪。我们通过提供一个foundKeys
对象来记录其找到的每个唯一键值,从而阻止其在随后的forEach()
中具有相同的键值。