Come aggiungere identificatori CSS univoci per i pulsanti di piano nel plugin Discourse Subscriptions

Sviluppatore
1

Voglio modificare questo modello in modo che ogni opzione di pagamento abbia anche una classe che possa utilizzare per modificare separatamente i pulsanti. Attualmente, non sembra esserci un modo per selezionare separatamente i pulsanti dei piani. Fatemi sapere se sbaglio su questo.

In sostanza, voglio assicurarmi che ogni payment-plan nel codice qui sotto abbia la propria classe, come button1 o button2 o qualcosa di simile.

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

L’ho capito, per chi fosse interessato. Ember.js ha una funzione interessante per ottenere l’indice all’interno di un ciclo, e anche un helper per concatenare quell’indice con una stringa:

<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>