Wie man eindeutige CSS-Identifikatoren für Plan-Buttons im Discourse Subscriptions-Plugin hinzufügt

Entwickler
1

Ich möchte diese Vorlage so anpassen, dass jede Zahlungsoption eine eigene Klasse erhält, die ich nutzen kann, um die Buttons separat zu stylen. Aktuell scheint es keine Möglichkeit zu geben, die Plan-Buttons einzeln anzusprechen. Falls ich mich da irre, lass es mich bitte wissen.

Im Grunde möchte ich sicherstellen, dass jeder payment-plan im folgenden Code mit einer eigenen Klasse versehen wird, etwa button1 oder button2 oder ähnlich.

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

Ich habe es herausgefunden, falls jemand interessiert ist. Ember.js verfügt über eine praktische Funktion, um den Index in einer Schleife zu erhalten, sowie einen Helfer, um diesen Index mit einem String zu verketten:

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