我发现很多使用{{#each}}
助手迭代多维数组的例子,但我无法弄清楚如何访问一维数组中的每个值。
例如,拿这个数组:
skills: ['Design', 'Development', 'HTML5', 'CSS', 'JavaScript'],
如何在下面的助手中输出每个项目?
template: Handlebars.compile(
'<div>' +
'{{#each skills}} {{ the_item_output }} {{/each}}' +
'</div>'
),
我需要放置{{ the_item_output }}
来查看实际项目吗?
答案 0 :(得分:53)
{{#each people}}
<li>{{this}}</li>
{{/each}}
答案 1 :(得分:4)
标量值数组应该使用Simple Iterators语法。您需要在#each
属性上声明skills
块。
每个值的占位符可以是{{this}}
或{{.}}
。
您需要使用以下模板:
{{#each skills}}
<li>{{this}}</li>
{{/each}}
或者,您可以使用#list
。
{{#list skills}}
<li>{{.}}</li>
{{/list}}
function listToHTML(items) {
return '<ul>' + items.map(function(item) {
return '<li>' + item + '</li>';
}).join('') + '</ul>';
}
Handlebars.registerHelper({
scalar_list_raw : function(items) {
return listToHTML(items);
},
scalar_list_safe_string: function(items) {
return new Handlebars.SafeString(listToHTML(items));
},
});
var data = {
skills: [ 'Design', 'Development', 'HTML5', 'CSS', 'JavaScript' ],
};
$(function() {
var source = $("#skills-template").html();
var template = Handlebars.compile(source);
$('body').append(template(data));
});
ul li {
list-style-type: upper-roman;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js"></script>
<script id="skills-template" type="text/x-handlebars-template">
<h2>Skills - [Block] Each</h2>
<ul>
{{#each skills}}
<li>{{this}}</li>
{{/each}}
</ul>
<h2>Skills - [Helper] SafeString</h2>
{{scalar_list_safe_string skills}}
<h2>Skills - [Helper] Raw HTML</h2>
{{{scalar_list_raw skills}}}
</script>