web-dev-qa-db-fra.com

Ajout d'un décalage à {{@index}} lors de la boucle des éléments dans le guidon

J'itère sur une liste dans Guidons en utilisant l'assistant each intégré. Dans chaque bloc, je fais référence à index de boucle actuel{{@index}} pour imprimer le numéro consécutif d'un article:

<script id="list-item-template" type="text/x-handlebars-template">
    {{#each items}}
    <li class="topcoat-list__item">
        <a href="#{{@index}}">Item number {{@index}}</a>
    </li>
    {{/each}}
</script>

Cela donne la sortie suivante:

  • Numéro d'article 0
  • Numéro d'article 1
  • Numéro d'article 2
  • ....

Le problème est que je veux afficher un index décalé qui commence par 1 au lieu de 0.

J'ai essayé d'effectuer des calculs sur l'index comme {{@index+1}}, mais cela mène juste à un

Erreur non interceptée: erreur d'analyse

handlebars.js
57
Mobiletainment

Le guidon vous donne la possibilité d'écrire un assistant personnalisé qui gère cette situation, par ex. une fonction d'aide qui vous permet d'effectuer des calculs sur des expressions comme l'addition et la soustraction, etc.

La fonction ci-dessous enregistre un nouvel assistant, qui incrémente simplement une valeur de 1:

var Handlebars = require('handlebars');

Handlebars.registerHelper("inc", function(value, options)
{
    return parseInt(value) + 1;
});

Vous pouvez ensuite l'utiliser dans l'expression du guidon en utilisant le mot clé inc, comme:

{{inc @index}}
86
Mobiletainment

Réponse réelle: https://stackoverflow.com/a/46317662/1549191

Enregistrez un guidon mathématique et effectuez toutes les opérations mathématiques.

app.engine('handlebars', exphbs({
  helpers:{
    // Function to do basic mathematical operation in handlebar
    math: function(lvalue, operator, rvalue) {lvalue = parseFloat(lvalue);
        rvalue = parseFloat(rvalue);
        return {
            "+": lvalue + rvalue,
            "-": lvalue - rvalue,
            "*": lvalue * rvalue,
            "/": lvalue / rvalue,
            "%": lvalue % rvalue
        }[operator];
    }
}}));
app.set('view engine', 'handlebars');

Ensuite, vous pouvez effectuer directement l'opération dans votre vue.

    {{#each myArray}}
        <span>{{math @index "+" 1}}</span>
    {{/each}}
6
Priyanshu Chauhan

Je pense que vous pouvez utiliser ...

{{math @index "+" 1}}
4
Adam Youngers

J'ai résolu ce problème pour moi-même en ajoutant une courte balise de script au bas de mon code de guidon!

Ajoutez une classe à l'endroit où vous appelez @index, puis le code jQuery ci-dessous fonctionne (peut également être effectué à l'aide de Vanilla JS).

<p class="create_index">
     {{@index}}
</p>
<script>
    $(".create_index").text(parseInt($(".create_index").text())+1)
</script>

edit 4/28 - Cela a changé pour utiliser Vanilla JS pour une meilleure compatibilité descendante (c'est-à-dire IE7, 8):

<span class="create_index"></span>
<script>
    var divs = document.querySelectorAll('.create_index');
    for (var i = 0; i < divs.length; ++i) {
        divs[i].innerHTML = i + 1;
    }
</script>

document.querySelectorAll A une grande compatibilité mais pourrait aussi être document.getElementsByClassName("create_index")

2
Max

Pour étendre la réponse de Mobiletainment, cette solution permet d'incrémenter la valeur en tant qu'argument. Si aucune valeur n'est transmise, une valeur par défaut de 1 est utilisée.

Handlebars.registerHelper('inc', function(number, options) {
    if(typeof(number) === 'undefined' || number === null)
        return null;

    // Increment by inc parameter if it exists or just by one
    return number + (options.hash.inc || 1);
});

Dans votre modèle, vous pouvez ensuite écrire:

{{inc @index inc=2}}
2
masterwok

La bibliothèque guidons-aides possède une bibliothèque de mathématiques assez complète dans lib/math.js, y compris un usage général {{add a b}} assistant défini comme suit:

/**
 * Return the product of a plus b.
 *
 * @param {Number} a
 * @param {Number} b
 * @api public
 */
helpers.add = function(a, b) {
  return a + b;
};

Si vous ne voulez pas copier et coller ceci dans votre projet et que vous avez la possibilité d'utiliser npm, vous pouvez obtenir cette dépendance comme suit:

npm install handlebars-helpers --save

Ensuite, vous pouvez enregistrer les assistants mathématiques comme suit:

const handlebars = require('handlebars'),
  handlebarsHelpers = require('handlebars-helpers');

handlebarsHelpers.math({
  handlebars: handlebars
});
1
Pierre Spring

J'utilisais nodejs et express-guidbars comme moteur de modèle et je fais face au même problème. Et c'est ainsi que j'ai réussi à résoudre.

Vous pouvez créer un dossier et un fichier js à l'intérieur de celui-ci où vous pouvez créer vos propres assistants personnalisés qui prend l'index et retourne l'incrémentation de 1.

module.exports = {
    formatIndex: function(index)  {
        return index+1;
    }
}

N'oubliez pas d'enregistrer l'aide dans votre application (dans mon cas app.js). J'ai utilisé un guidon express, j'ai donc réinscrit Helper de cette manière:

app.engine('handlebars', exphbs({defaultLayout: 'home', helpers: { formatIndex }}));

Remarque: Vous devez importer formatIndex avant de vous inscrire.

Ensuite, vous pouvez l'utiliser dans votre vue comme:

{{#each assignments}}
     <div>{{formatIndex @index }}</div>
{{/if}}
0
John

Jeter ma solution ici. compteurs CSS .

body {
  counter-reset: section;                     /* Set a counter named 'section', and its initial value is 0. */
}

h3::before {
  counter-increment: section;                 /* Increment the value of section counter by 1 */
  content: counter(section);                  /* Display the value of section counter */
}

J'étais coincé là-dessus et c'était une meilleure solution par rapport à l'ajout d'un nouvel assistant.

0
SpaceBeers