web-dev-qa-db-fra.com

Compteur de guidon #each

Dans Handlebars, dites que j'ai une collection de names comment puis-je faire

{{#each names}}
{{position}}
{{name}}
{{/each}}

où {{position}} est 1 pour le prénom, 2 pour le deuxième nom, etc. Dois-je absolument enregistrer la position en tant que clé dans la collection?

javascripttemplateshandlebars.jstemplate-engine
17
algorithmicCoder

Vous pouvez le faire avec la notation Handlebars @ index intégrée:

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

@index donnera l'index (base zéro) de chaque élément du tableau donné.

Veuillez noter que pour les personnes utilisant le guidon avec le moteur de vue Razor, vous devez utiliser la notation @@ index pour éviter les erreurs de compilation.

Pour plus d’aides intégrées, voir http://handlebarsjs.com/

34
Smix
Handlebars.registerHelper("counter", function (index){
    return index + 1;
});

Usage: 

{{#each names}}
    {{counter @index}}
    {{name}}
{{/each}}
18
serg

Bien que vous ne puissiez le faire avec aucun assistant de guidon natif, vous pouvez créer le vôtre. Vous pouvez appeler Handlebars.registerHelper() en lui transmettant une chaîne portant le nom que vous souhaitez faire correspondre (position) et une fonction qui renverrait le nombre de positions en cours. Vous pouvez suivre le numéro de position dans la clôture où vous appelez registerHelper. Voici un exemple de la façon dont vous pouvez inscrire un utilitaire appelé position qui devrait fonctionner avec votre exemple de modèle.

JavaScript:

// Using a self-invoking function just to illustrate the closure
(function() {
    // Start at 1, name this unique to anything in this closure
    var positionCounter = 1;

    Handlebars.registerHelper('position', function() {
        return positionCounter++;
    });

    // Compile/render your template here
    // It will use the helper whenever it seems position
})();

Voici un jsFiddle à démontrer: http://jsfiddle.net/willslab/T5uKW/1/

Bien que les aides soient documentées sur handlebarsjs.com , il m'a fallu quelques efforts pour comprendre comment les utiliser. Merci pour le défi, et j'espère que ça aide!

3
Will Klein

seulement vous devez utiliser {{@index}}

exemple:

{{#.}}
<li class="order{{@index}}"> counter: {{@index}}</li>
{{/.}}
2
elin3t

Voici ma solution préférée. Enregistrez un assistant qui étend le contexte pour inclure automatiquement votre propriété de position. Ensuite, utilisez simplement votre nouvel assistant de bloc (ex. #Iter) au lieu de #each.

Handlebars.registerHelper('iter', function (context, options) {
    var ret = "";

    for (var i = 0, j = context.length; i < j; i++) {
        ret += options.fn($.extend(context[i], {position: i + 1}));
    }

    return ret;
});

Usage:

{{#iter names}}
    {{position}}
    {{name}}
{{/iter}}

adapté de http://rockycode.com/blog/handlebars-loop-index/

1
oldegreyg

vous pouvez obtenir une valeur juste à partir de l'index dans la liste.

{{#each list}}
    @index
{{/each}}
0
Yatender Singh