Dans Mustache, Comment obtenir l'index de la section courante ?

Question

J'utilise Moustache et en utilisant les données

{ "names": [ {"name":"John"}, {"name":"Mary"} ] }

Mon modèle de moustache est :

{{#names}}
    {{name}}
{{/names}}

Ce que je veux pouvoir faire, c'est obtenir un index du numéro actuel dans le tableau. Quelque chose comme :

{{#names}}
    {{name}} is {{index}}
{{/names}}

et le faire imprimer

John is 1
Mary is 2

Est-il possible d'obtenir cela avec Mustache ? ou avec Handlebars ou une autre extension ?

Answer 1

Voici comment je le fais en JavaScript :

var idx = 0;

var data = { 
   "names": [ 
       {"name":"John"}, 
       {"name":"Mary"} 
    ],
    "idx": function() {
        return idx++;
    }
};

var html = Mustache.render(template, data);

Votre modèle :

{{#names}}
    {{name}} is {{idx}}
{{/names}}

Answer 2

Pour référence, cette fonctionnalité est maintenant intégrée à Handlebars qui est compatible avec Mustache.

Utilisez {{@index}}

{{#names}}
    {{name}} is {{@index}}
{{/names}}

John est 0

Mary est 1

Answer 3

Dans handlebars.js, vous pouvez accomplir cela avec une fonction d'aide. (En fait, l'un des avantages mentionnés à propos de handlebars ici http://yehudakatz.com/2010/09/09/announcing-handlebars-js/ est que vous pouvez utiliser des aides au lieu de devoir réécrire les objets avant d'appeler le modèle.

Donc, tu pourrais faire ça :

  var nameIndex = 0;
  Handlebars.registerHelper('name_with_index', function() {
    nameIndex++;
    return this.name + " is " + nameIndex;
  })

Et, ensuite, votre modèle peut être celui-ci :

{{#names}}
<li>{{name_with_index}}</li>
{{/names}}

Vos données sont les mêmes que précédemment, à savoir :

{ "names": [ {"name":"John"}, {"name":"Mary"} ] };

Et vous obtenez ce résultat :

<li>John is 1</li>
<li>Mary is 2</li>

Pour que cela fonctionne vraiment, nameIndex doit être réinitialisé à chaque fois que le modèle est rendu, donc pour ce faire, vous pouvez avoir une aide de réinitialisation au début de la liste. Le code complet ressemble donc à ceci :

  var data = { "names": [ {"name":"John"}, {"name":"Mary"} ] };
  var templateSource = "<ul>{{reset_index}}{{#names}}<li>{{name_with_index}}</li>{{/names}}</ul>";
  var template = Handlebars.compile(templateSource);

  var helpers = function() {
    var nameIndex = 0;
    Handlebars.registerHelper('name_with_index', function() {
      nameIndex++;
      return this.name + " is " + nameIndex;
    });
    Handlebars.registerHelper('reset_index', function() {
      nameIndex = 0;
    })
  }();

  var htmlResult= template(data);
  $('#target').html(htmlResult);

  var htmlResult2= template(data);
  $('#target2').html(htmlResult2);

(Cela peut rendre correctement le modèle deux fois).

Answer 4

Vous pouvez exécuter la boucle suivante sur votre liste d'objets.

Cette solution présente les avantages suivants :

• Ne modifie pas les données du modèle
• L'index peut être consulté plusieurs fois

Code :

for( var i=0; i< the_list.length; i++) {
    the_list[i].idx = (function(in_i){return in_i+1;})(i);
}

Explication :

Une fonction est utilisée au lieu d'un nom de variable, de sorte que les données ne sont pas mutées. La fermeture est utilisée pour renvoyer la valeur de 'i' au moment où la fonction est créée dans la boucle au lieu de la valeur de i à la fin de la boucle.

Answer 5

Une aide précieuse ici :

// {{#each_with_index records}}
//  <li class="legend_item{{index}}"><span></span>{{Name}}</li>
// {{/each_with_index}}

Handlebars.registerHelper("each_with_index", function(array, fn) {
    var buffer = "";
    for (var i = 0, j = array.length; i < j; i++) {
        var item = array[i];

        // stick an index property onto the item, starting with 1, may make configurable later
        item.index = i+1;

        // show the inside of the block
        buffer += fn(item);
    }

    // return the finished buffer
    return buffer;

});

Source : https://gist.github.com/1048968