Existe-t-il un moyen de définir un compteur dans une itération de moustache?

Question

J'ai un code qui rend un modèle de moustache avec quelques itérations comme:

{{#items}} 
    some html code.... 
{{/items}} 

mais je veux placer dans l'itération le nombre d'élément qui est rendu, comme ça:

{{#items}} 
    This is the item [COUNTER-VAR] 
{{/items}} 

Il est un moyen d'effectuer cela .. ??

Answer 1

Vous pouvez utiliser l'extension de guidon de moustache et écrire une fonction d'assistance qui heurte un compteur.

Je mets plus d'explications ici. In Mustache, How to get the index of the current Section

Answer 2

Les guidons ne sont plus nécessaires. Vous pouvez utiliser les sections d'ordre élevé dans la moustache actuelle. Ils vous permettent essentiellement d'appeler une fonction avec le contenu de la section en tant qu'argument. Si cette section est à l'intérieur d'une itération, elle sera appelée pour chaque élément dans une itération.

Compte tenu de ce modèle (conservé dans une balise de script pour plus de clarté de commodité &)

<script type="text/html" id="itemview"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="3"> 
     <tbody> 
      {{#items}} 
       <tr> 
        <td>{{#count}}unused{{/count}}</td> 
        <td>{{.}}</td 
       </tr> 
      {{/items}} 
     </tbody> 
    </table> 
</script> 

... et le code suivant, vous pouvez créer une liste numérotée.

function buildPage(root) 
{ 
    var counter = 0; 
    var data = { 
     'items': [ 'England', 'Germany', 'France' ], 

     'count' : function() { 
      return function (text, render) { 
       // note that counter is in the enclosing scope 
       return counter++; 
      } 
     } 
    }; 

    // fetch the template from the above script tag 
    var template = document.getElementById('itemview').innerHTML; 
    document.getElementById("results").innerHTML = Mustache.to_html(template, data); 
} 

Sortie: 0 Angleterre 1 Allemagne 2 France

Answer 3

Utilisez {{}} @Index dans l'itération.

{{#data}} 
    <p>Index is {{@index}}</p> 
{{/data}}