javascript - Ember.js (v 1.13) - 从组件切换按钮的 CSS 类

Question

这是我的组件:

付款历史记录.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`

这是我的模板:

付款历史记录.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个computeProperties来形成类名。在您的组件中:

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

然后在模板中将这些计算属性绑定(bind)到匹配按钮的类属性。

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

我创建了一个小的 ember twiddle 来说明它:https://ember-twiddle.com/5102baadf05f659df572f9a8139e7949?openFiles=templates.components.my-component.hbs%2Ctemplates.components.my-component.hbs