Comment ajouter des identifiants CSS uniques pour les boutons de plan dans le plugin Discourse Subscriptions

Dev
1

Je souhaite modifier ce modèle afin que chaque option de paiement possède également une classe que je pourrais utiliser pour modifier les boutons séparément. Actuellement, il ne semble pas qu’il soit possible de cibler les boutons de plan individuellement. Faites-moi savoir si je me trompe à ce sujet.

En gros, je veux m’assurer que chaque payment-plan dans le code ci-dessus possède sa propre classe, comme button1 ou button2 ou autre.

<div class="subscribe-buttons">
  {{#each orderedPlans as |plan|}}
    {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan")}}
  {{/each}}
</div>
2

J’ai trouvé la solution, au cas où cela intéresserait quelqu’un. Ember.js propose une fonctionnalité pratique pour obtenir l’index dans une boucle, ainsi qu’un helper pour concaténer cet index avec une chaîne de caractères :

<script type="text/x-handlebars" data-template-name="javascripts/components/payment-options">
    <p>
        {{i18n "discourse_subscriptions.plans.select"}}
    </p>
    
    <div class="subscribe-buttons">
        {{#each orderedPlans as |plan i|}}
            {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan") elementId=(concat 'button' i)}}
        {{/each}}
    </div>
</script>