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>