كيفية إضافة معرفات CSS فريدة لأزرار الخطط في مكون الإضافات الاشتراكات Discourse

مطور
1

أرغب في تعديل هذا القالب بحيث تحتوي كل خيار دفع على فئة (class) خاصة يمكنني استخدامها لتعديل الأزرار بشكل منفصل. في الوقت الحالي، يبدو أنه لا توجد طريقة لاستهداف أزرار الخطط بشكل منفصل. أخبرني إذا كنت مخطئًا في ذلك.

بشكل أساسي، أريد التأكد من أن كل 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>