Ember.js（V 1.13） - 切換從組件按鈕的CSS類

Question

這裏是我的組件：

payment-history.coffee

`import Ember from 'ember'` 

PaymentHistoryComponent = Ember.Component.extend({ 
    years: 
    current: 
     value: 20 
     #value: moment().year() 
     selected:()-> 
     this.value == @get('years.active.value') 
    next: 
     value: 25 
     #value: moment().year() + 1 
     selected:()-> 
     this.value == @get('years.active.value') 
    active: 
     value: 19 
     #value: moment().year() 

    claimsByYear: Ember.computed('years.active.value', -> 
    self = this 
    @get('payments').filter((payment) -> 
     payment.datePaid.indexOf(self.get('years.active.value')) > -1 
    ) 
) 

    actions: 
    showYear: (year)-> 
     @set('years.active.value', year) 
}) 

`export default PaymentHistoryComponent` 

這裏是我的模板：

付款history.hbs

<button {{ action 'showYear' years.current.value }} class='button {{ if year.current.selected '' 'secondary'}}'> 
    {{ t 'payBills.paymentHistory1' }} {{ years.current.value }} {{ t 'payBills.paymentHistory2'}} 
</button> 

<button {{ action 'showYear' years.next.value }} class='button {{ if selected '' 'secondary'}}'> 
    {{ t 'payBills.paymentHistory1' }} {{ years.next.value }} {{ t 'payBills.paymentHistory2'}} 
</button> 

<table class="tabular-data"> 
    <tbody> 
    {{#each claimsByYear as |payment|}} 
      <tr> 
        <td class="date-paid"> 
          <span class="label">{{ t 'claims.payments.makePayment.datePaid' }}</span> 
          <strong>{{format-date payment.datePaid 'L'}}</strong> 
        </td> 
        <td> 
          <span class="label">{{ t 'claims.payments.makePayment.amountPaid' }}</span> 
          <strong>{{currency payment.amountPaid 2}}</strong> 
        </td> 
      </tr> 
    {{/each}} 
    </tbody> 
</table> 

請注意，有兩個按鈕。如果當前未選中，我想將一個secondary類應用於按鈕。我試圖根據是否選定某一年來更改years模型的selected屬性，但沒有任何結果。我無法升級到較新版本的Ember，所以我需要弄清楚如何在版本1.13中執行此操作。有誰知道可能的解決方案？

Answer 1

內聯if是最好的方法，如果你不能在你的Ember版本中使用它，你可以創建2個computedProperties來構成類名。在您的組件中：

... 
currentYearButtonClass: function() { 
    return this.get('year.current.selected') ? 'button' : 'button secondary'; 
}.property('year.current.selected'), 

nextYearButtonClass: function() { 
    return this.get('year.next.selected') ? 'button' : 'button secondary'; 
}.property('year.next.selected') 
... 

然後在您的模板中將這些計算的屬性綁定到匹配按鈕的類屬性。

<button {{ action 'showYear' years.current.value }} class="{{currentYearButtonClass}}"> 
    {{ t 'payBills.paymentHistory1' }} {{ years.current.value }} {{ t 'payBills.paymentHistory2'}} 
</button> 

<button {{ action 'showYear' years.next.value }} class="{{nextYearButtonClass}}"> 
    {{ t 'payBills.paymentHistory1' }} {{ years.next.value }} {{ t 'payBills.paymentHistory2'}} 
</button> 

我創建了一個小燼玩弄來說明吧：https://ember-twiddle.com/5102baadf05f659df572f9a8139e7949?openFiles=templates.components.my-component.hbs%2Ctemplates.components.my-component.hbs