Accedere ai valori usando {{#per ogni}} in un array monodimensionale

Ho trovato un sacco di esempi di utilizzo della {{#each}} helper per scorrere array multi-dimensionali, ma io non riesco a capire come accedere a ogni valore in una matrice unidimensionale.

Per esempio, prendiamo questo array:

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

Come faccio a uscita di ogni elemento, in un helper, come di seguito?

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

Di cosa ho bisogno per mettere in posti di {{ the_item_output }} per vedere l’oggetto reale?

 

2 Replies
  1. 54
    {{#each skills}}
      <li>{{this}}</li>
    {{/each}}
    • Penso che si desidera competenze, non le persone
  2. 4

    Un array di valori scalari dovrebbero utilizzare il Semplice Iteratori grammatica. È necessario dichiarare un #each blocco sulla skills proprietà.

    Il segnaposto per ogni valore può essere {{this}} o {{.}}.

    È necessario utilizzare il seguente modello:

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

    In alternativa, è possibile utilizzare #list.

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

    Esempio

    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>

Lascia un commento