Discourse Subscriptions プラグインでプランボタンにユニークなCSS識別子を追加する方法

開発
1

このテンプレートを変更して、各支払いオプションに個別にボタンをカスタマイズするために使用できるクラスを追加したいと考えています。現在、プランボタンを個別にターゲットする方法はないようですが、私の認識が間違っていたら教えてください。

基本的に、以下のコード内の各 payment-plan に button1 や button2 のような独自のクラスが付属するようにしたいです。

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

わかりましたので、興味のある方のために共有します。Ember.js にはループ内のインデックスを取得する便利な機能があり、さらにそのインデックスを文字列と連結するヘルパーもあります。

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