recorrer - manejo de array con javascript

Acceda a los valores utilizando{{##}} en una matriz unidimensional

Question

He encontrado muchos ejemplos de uso del ayudante {{#each}} para iterar sobre matrices multidimensionales, pero no puedo averiguar cómo acceder a cada valor en una matriz unidimensional.

Por ejemplo, toma esta matriz:

skills: [''Design'', ''Development'', ''HTML5'', ''CSS'', ''JavaScript''],

¿Cómo imprimo cada elemento en un ayudante como abajo?

template: Handlebars.compile(
''<div>'' + 
    ''{{#each skills}} {{ the_item_output }} {{/each}}'' +
''</div>''
),

¿Qué necesito colocar en la ubicación de {{ the_item_output }} para ver el elemento real?

Answer 1

Una serie de valores escalares debería hacer uso de la gramática de los iteradores simples . Necesitas declarar un bloque #each en la propiedad de skills .

El marcador de posición para cada valor puede ser {{this}} o {{.}} .

Necesitas usar la siguiente plantilla:

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

Alternativamente, puedes usar #list .

{{#list skills}}
    <li>{{.}}</li>
{{/list}}

Ejemplo

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>

Answer 2

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