Cómo añadir identificadores CSS únicos para los botones de plan en el plugin de suscripciones de Discourse

Desarrollador
1

Quiero modificar esta plantilla para que cada opción de pago tenga también una clase que pueda usar para modificar los botones por separado. Actualmente, parece que no hay forma de dirigirse a los botones de los planes de forma individual. Avísame si estoy equivocado en esto.

Básicamente, quiero asegurarme de que cada payment-plan en el código de abajo venga con su propia clase, como button1 o button2 o algo así.

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

Lo descubrí, por si alguien está interesado. Ember.js tiene una característica genial para obtener el índice en el bucle, y también un helper para concatenar ese índice con una cadena:

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