Access values using {{#each}} in a one dimensional array
An array of scalar values should make use of the Simple Iterators grammar. You need to declare an #each block on the skills property.
The placeholder for each value can be either {{this}} or {{.}}.
You need to use the following template:
{{#each skills}}
<li>{{this}}</li>
{{/each}}
Alternatively, you can use #list.
{{#list skills}}
<li>{{.}}</li>
{{/list}}
Example
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>{{#each skills}}
<li>{{this}}</li>
{{/each}}