Javascript Girl
  1. Javascript Girl
  3. Compteur de guidon #each
Intereting Posts
Obtenez le pourcentage de chargement de la page à l'aide de javascript? La directive angulaire n'évalue pas Inside ng-repeat Est-il possible d'exporter une valeur d'une variable d'un javascript vers un autre? Jquery Image popout sur le vol stationnaire Quelle est la différence entre la commande node vs nodejs dans le terminal? Comment configurer le corps brut dans jQuery Ajax? Suppression d'éléments de dom en utilisant queryselectorall, jquery, getelementsbyid, gelelementsbyclassname Le moyen le plus rapide d'ajouter / supprimer plusieurs éléments dans DOM JavaScript: Différents comportements lors de l'utilisation de la notation par points par rapport à la notation de la parenthèse Validation de la date de javascript avec l'objet Date Mongoose, requête de tri par champ rempli Comment démarrer / arrêter jCarousel par des contrôles / événements externes Comment créer un éditeur HTML / JS WYSIWYG? Comprendre les fonctions du nombre en JavaScript Dessiner un rectangle à l'aide d'un clic, d'un déplacement de la souris, et cliquez sur

Compteur de guidon #each

Dans Handlebars, dis-je, 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. Est-ce que je dois absolument conserver la position en tant que clé dans la collection?

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

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

@index donnera l'index (basé sur zéro) de chaque élément dans le tableau donné.

Veuillez noter que pour les personnes qui utilisent les guidons avec le moteur de visualisation Razor, vous devez utiliser l'indice @@ index pour éviter les erreurs de compilation.

Pour plus d'assistants intégrés, consultez http://handlebarsjs.com/ 

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

Usage: 

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

Bien que vous ne puissiez pas le faire avec n'importe quel assistant de Guidon natif, vous pouvez créer le vôtre. Vous pouvez appeler Handlebars.registerHelper() , en passant une chaîne avec le nom que vous souhaitez associer (position) et une fonction qui renverrait le nombre de positions actuel. Vous pouvez suivre le numéro de position dans la fermeture où vous appelez registerHelper . Voici un exemple de la façon dont vous pouvez enregistrer un position aide appelé 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/

Alors que les assistants sont documentés sur handlebarsjs.com , cela a pris beaucoup d'effort pour comprendre comment les utiliser. Merci pour le défi, et j'espère que cela vous aidera!

Seulement vous devez utiliser {{@index}}

Exemple: 

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

Voici ma solution préférée. Enregistrez un assistant qui étend le contexte pour inclure automatiquement votre propriété de position. Ensuite, utilisez 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/

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

 {{#each list}} @index {{/each}}