Ember.js(1.13版）-切换按钮's组件中的CSS类

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

本文关键字：组件 CSS 按钮 js 13版 Ember      更新时间：2023-09-26

这是我的组件：

付款历史咖啡

`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版本中做到这一点。有人知道可能的解决方案吗？

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

然后在模板中将这些计算出的属性绑定到匹配按钮的class属性。

<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%2templates.components.my-component.hbs

相关文章：