samedi 16 juillet 2016

Ember.js (v 1.13) - Toggle button's CSS class from component

Here's my component:

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`

Here's my template:

payment-history.hbs

<button  class='button '>
    
</button>

<button  class='button '>
    
</button>

<table class="tabular-data">
    <tbody>
    
            <tr>
                    <td class="date-paid">
                            <span class="label"></span>
                            <strong></strong>
                    </td>
                    <td>
                            <span class="label"></span>
                            <strong></strong>
                    </td>
            </tr>
    
    </tbody>
</table>

Note that there are two buttons. I'd like to apply a class of secondary to a button if it is not currently selected. I've tried changing the selected attribute of the years models based on whether a given year is selected, but nothing has worked. I can't upgrade to a newer version of Ember, either, so I need to figure out how to do this in version 1.13. Does anyone know of a possible solution?




Aucun commentaire:

Enregistrer un commentaire