recorrer - manejo de array con javascript
Acceda a los valores utilizando{{##}} en una matriz unidimensional (2)
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>
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?
{{#each people}}
<li>{{this}}</li>
{{/each}}