in checkbox click, change which buttons can be clicked

Question

I'm starting in ember now, and i already made all my static app, so i "just" need create the ember layer on top.

In my events page, i have a list where i'm showing the events (the events are from my database).

events.js:

export default = Ember.Route.extend({
 model () {
   return this.store.findAll('event');
 }
});

And in my template i'm doing a looping, which will print something like this:http://codepen.io/anon/pen/YydjwV As you can see, is static.

In this page i have a controller, which will control the actions based on checkbox checked:

<ul class="controller__list">
  <li class="controller__item">
    <span class="controller__legend"> New </span>
  </li>
  <li class="controller__item">
    <span class="controller__legend"> Edit </span>
  </li>
  <li class="controller__item">
    <span class="controller__legend"> Delete </span>
  </li>
</ul>

So.. depending on the number of checkboxes checked, i want allow clicks on this actions:

New action = 0 - Infinity checkbox checked (always allowed)
Edit action = 1 - 1 checkboxes checked
Delete action = 1 - Infinity checkbox checked

My question... how can i bind this with the actions??? I really new to Ember, and this is very hardcore level i think.. i'm studying a lot, but the learning curve is so crazy.. So.. i was think, how could i do that? First i need bind actions in my inputs, right??? So:

{{input type="checkbox" action='checkBoxClicked'}}

and in my EventController:

export default = Ember.ArrayController.extend({
 actions: {
   checkBoxClicked () {
      // WHAT NOW? HOW DISABLE THE BUTTONS?
   }
 }
});

I don't want know how to save, delete, edit, etc.. this thinks are easy, my problem is understand how to use components and manipulate html depending on actions.

Guys, i'm not asking for a full answer, i know the SOF is not this kind of forum, but a light would be very nice.. some tutorial, ANYTHING..

Answer 1

1st way:

You need 2 properties which would control if certain action can run. Let's call it:

• allowEdit
• allowDelete

Then in new, edit and delete action check first for property value, if this action run. For example:

actions: {
  edit() {
    if (!this.get('allowEdit')) {
      // action not allowed
      return;
    }
    // your logic
  }
}

Then maintain number property which would record how many checkboxes are checked and depending on it's value set allowEdit and allowDelete to correct values.

2nd way:

You could also make allowEdit and allowDelete computed properties which would depend on model.@each.checked, inside computed function you could check how many records have checked set to true and count them (for example in loop). Then you could return from computed function true if (for edit) this count of checked records is 1. Otherwise false.

The most important part would be to add checked property to checkbox inside template each loop where you iterate over your events in model:

{{#each model as |item|}}
  {{input type='checkbox' checked=item.checked}}
{{/each}}

I can change the status of the allowX when the checkbox are checked.. right??

Yes, you can do that for example like that:

allowEdit: Ember.computed('model.@each.checked', function() {
  let count = 0;
  this.get('model').then(model => { // or simply let model = this.get('model');
    model.forEach(item => {
      if (item.get('checked')) {
        count += 1;
      }
    });
    if (count === 1) {
      return true;
    }
    return false;
  });
})

but what about bind classes in this buttons? For example.. i have a class controller--disable.. and i would like to check every time a checkbox is clicked to remove this class..

You can use controller properties in template to add or remove class, for example:

<span class="controller__legend {{if allowEdit 'allow-edit' 'disable-edit'}}"> Edit </span>