Observe property on an array of objects for any changes

Question

I am using Aurelia and I have an array of items bound to a grid and they have a selected property on them. I want to bind a button to be enabled when any one of the items is

Answer 1

In addition to the Jeremy's examples, you can create a custom setter, for example:

class Item {
   // this is your ~private~ field
  _isSelected = false;

  // in our constructor, we pass the view model and the property name
  constructor(vm, prop, name) {
    this.vm = vm;
    this.prop = prop;
    this.name = name;
  }

  get isSelected() {
    return this._isSelected;
  }
  // when you set the value, you increase the vm's property
  set isSelected(value) {
    if (value !== this._isSelected) {
      this.vm[this.prop] += value ? 1 : -1;
      this._isSelected = value;
    }
  }
}

export class MyViewModel
{
  items = [];
  itemsSelected = 0; // that's the property we'll pass to the class we've created

  constructor() 
  {
    for (let i = 0; i < 50; i++) {
      // instead of adding a annonymous {} here, we add an instance of our class
      this.items.push(new Item(this, 'itemsSelected', `Item ${i+1}`));
    }
  }

  toggleIsSelected(item) {
    item.isSelected = !item.isSelected;
  }
}

I've created a plunker for you: http://plnkr.co/edit/OTb2RDLZHf5Fy1bVdCB1?p=preview

---

Doing that, you'll never be looping to see if some item has changed.