CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Michael P.
Michael P.

Reputation: 1413

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 {{ 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>

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?

Upvotes: 0

Views: 144

Answers (1)

Nazim
Nazim

Reputation: 367

The inline if would be the best way, if you can't use it in your version of Ember you could create 2 computedProperties that will form the class name. In your component:

...
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')
...

and then in your template bind these computed properties to the class attribute of the matching button.

<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>

I created a small ember twiddle to illustrate it: https://ember-twiddle.com/5102baadf05f659df572f9a8139e7949?openFiles=templates.components.my-component.hbs%2Ctemplates.components.my-component.hbs

Upvotes: 1

Related Questions