Les valeurs de l'accès à l'aide de {{#chaque}} dans un tableau multidimensionnel

J'ai trouvé beaucoup d'exemples d'utilisation de l' {{#each}} de l'aide pour effectuer une itération sur multi-dimensions des tableaux, mais je ne peux pas comprendre comment accéder à chaque valeur dans un tableau à une dimension.

Par exemple, prenez ce tableau:

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

Comment puis-je sortie de chaque élément, une aide comme ci-dessous?

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

De quoi ai-je besoin de mettre en place des {{ the_item_output }} pour voir l'élément réel?

InformationsquelleAutor shrewdbeans | 2014-02-16
  1. 53
    {{#each people}}
  <li>{{this}}</li>
  {{/each}}
    • Je pense que vous voulez de compétences, pas les gens
    InformationsquelleAutor alexdd55
  2. 4

    Un tableau de valeurs scalaires devraient faire usage de la Simple Itérateurs de la grammaire. Vous devez déclarer une #each bloc sur le skills propriété.

    L'espace réservé pour chaque valeur peut être soit {{this}} ou {{.}}.

    Vous devez utiliser le modèle suivant:

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

    Alternativement, vous pouvez utiliser #list.

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

    Exemple

    JS:

    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));
});

    CSS:

    ul li {
  list-style-type: upper-roman;
}

    HTML:

    <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>

    InformationsquelleAutor Mr. Polywhirl