Access Values Using {{#each}} In A One Dimensional Array

I've found a lot of examples of using the {{#each}} helper to iterate over multi-dimensional arrays, but I can't figure out how to access each value in a one-dimensional array. For

Solution 1:

{{#each skills}}
  <li>{{this}}</li>
{{/each}}

Solution 2:

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

functionlistToHTML(items) {
  return'<ul>' + items.map(function(item) {
    return'<li>' + item + '</li>';
  }).join('') + '</ul>';
}

Handlebars.registerHelper({
  scalar_list_raw : function(items) {
    returnlistToHTML(items);
  },
  
  scalar_list_safe_string: function(items) {
    returnnewHandlebars.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));
});

ulli {
  list-style-type: upper-roman;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js"></script><scriptid="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>