Disable button depending on how many checkbox are checked

1

Guys, i’m using the follow code to block edit and delete button, depending on how many checkbox are checked in the table list:

  allowEdit: Ember.computed('model.@each.checked', function() {
    let count = 0;
    let result;

    this.get('model').forEach(item => {
      item.get('checked') ? count += 1 : count = count;
    });

    count === 1 ? result = true : result = false;
    return result;
  }),

  allowDelete: Ember.computed('model.@each.checked', function() {
    let count = 0;
    let result;

    this.get('model').forEach(item => {
      item.get('checked') ? count += 1 : count = count;
    });

    count >= 1 ? result = true : result = false;
    return result;
  }),

And in my template i have:

  {{#link-to "events.edit"}}
    <li class="controller__item {{if allowEdit "" "controller__item--disabled"}}">
      <i class="icon icon__pencil icon__2x"></i>
      <span class="controller__legend">Editar</span>
    </li>
  {{/link-to}}
  <li class="controller__item {{if allowDelete "" "controller__item--disabled"}}" {{action "delete"}}>
    <i class="icon icon__trash icon__2x"></i>
    <span class="controller__legend">Deletar</span>
  </li>

As you can see, i’m doing pretty much the same thing in the two computed properties. I would like to replace the two for one, but i don’t know exactly how i could do that.

edit button will be free if just one checkbox are checked delete button will be free if one or more checkbox are checked.

Thanks!!

2

Factor out common behavior:

checkedCount: Ember.computed('model.@each.checked'), function () {
    let count = 0;
    get(this, 'model').forEach(function (item) {
        if (get(item, 'checked')) { count += 1; }
    });
    return count;
}),
allowEdit: Ember.computed.equal('checkedCount', 1),
allowDelete: Ember.computed.gte('checkedCount', 1)

Or, even simpler:

checkedModels: Ember.computed.filterBy('models', 'checked'),
allowEdit: Ember.computed.equal('checkedModels.length', 1),
allowDelete: Ember.computed.gte('checkedModels.length', 1)

First property will be an array of all checked models. Can come in handy in other parts of your code as well.

3

Get it!

I didn’t know that i can do that!!! Thank you spectras!