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> 

2つのボタンがあります。現在選択されていない場合は、secondaryのクラスをボタンに適用したいと考えています。私はyearsモデルのselected属性を、特定の年が選択されているかどうかに基づいて変更しようとしましたが、何も機能していません。 Emberの新しいバージョンにアップグレードすることはできませんので、バージョン1.13でこれを行う方法を理解する必要があります。誰もが解決策を知っていますか？

Answer 1

インラインなら最高の方法ですが、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