Como adicionar identificadores CSS exclusivos para botões de plano no plugin Discourse Subscriptions

Dev
1

Quero modificar este modelo para que cada opção de pagamento também tenha uma classe que eu possa usar para modificar os botões separadamente. Atualmente, parece que não há como direcionar os botões de plano separadamente. Avise-me se estiver errado sobre isso.

Basicamente, quero garantir que cada payment-plan no código abaixo venha com sua própria classe, como button1 ou button2 ou algo assim.

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

Descobri, caso alguém se interesse. O Ember.js tem um recurso legal para obter o índice no loop e também um helper para concatenar esse índice com uma string:

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